<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.frame{
border: 1px solid grey;
padding: 5px;
margin: 10px auto;
}
ul{
list-style: none;
margin-left: 2em;
}
</style>
</head>
<body onload="ttus()">
<div id="commodity">
</div>
<input id="delete" type="button" value="删除所选">
<p id="total">总价为：0</p>
</body>
<script>
var json = [
// 两个店铺
{
"shopname": "京东自营",
"shopID": 101,
// 商品
"goods": [
{
"checked": false,
"goodName": "USB转换器",
"goodID": 1001,
"price": 158,
"num": 1
}, {
"checked": false,
"goodName": "USB转换器",
"goodID": 1002,
"price": 158,
"num": 1
}
]
},
{
"shopname": "京东非自营",
"shopID": 102,
// 商品
"goods": [
{
"checked": false,
"goodName": "ipone7s",
"goodID": 1003,
"price": 9999,
"num": 4
}, {
"checked": false,
"goodName": "sumsung note 7",
"goodID": 1004,
"price": 5288,
"num": 10
}
]
},
{
"shopname": "某某旗舰店",
"shopID": 103,
// 商品
"goods": [
{
"goodID": 1007,
"checked": false,
"goodName": "USB转换器",
"price": 158,
"num": 1
}, {
"checked": false,
"goodName": "USB转换器",
"goodID": 1005,
"price": 158,
"num": 1
},
{
"checked": false,
"goodName": "ipad",
"goodID": 1006,
"price": 5.22,
"num": 5
}
]
}
];
function ttus() {
let obody=document.getElementById("commodity");
for (i in json ){
let frame=document.createElement("div"); //创建一个div节点
let headline=document.createElement("p"); //p 节点
let oul=document.createElement("ul"); // 创建 ul节点
frame.classList.add("frame"); // 给div 增加加一个类名
headline.innerText=json[i].shopname;
//遍历json里的店名 赋值给p标签的内容
frame.appendChild(headline); //给div 添加一个子元素p标签
frame.appendChild(oul); //给div 添加一个子元素创建的ul标签
for (j in json[i].goods){ //遍历json里面的goods
let oli=document.createElement("li"); //创建一个li
// ` 配合${} 确保提起的一定是变量
oli.innerHTML=`<input onclick="oCcheck(this,${json[i].goods[j].goodID})" type="checkbox">` +
'<span>'+json[i].goods[j].goodName+" "+json[i].goods[j].price+'</span>' +
`<input type="button" onclick="minus(this,${json[i].goods[j].goodID})" value="-">` +
'<input class="text" type="text" value="'+json[i].goods[j].num+'">' +
`<input type="button" onclick="plus(this,${json[i].goods[j].goodID})" value="+">` +
'<span>'+json[i].goods[j].num*json[i].goods[j].price+'</span>';
oul.appendChild(oli);//给UL加上创建的Li，goods有几个元素就加几个Li
}
obody.insertBefore(frame,obody.childNodes[i]);//把店铺添加到obody里。
}
}
function plus(that,num) {//+号按钮的作用
for (i in json){
for (j in json[i].goods){
if (json[i].goods[j].goodID==num) {//遍历Id，如果相同
that.parentNode.childNodes[3].value++;//input text文本的值++
json[i].goods[j].num=that.parentNode.childNodes[3].value;//修改json相应的值
that.parentNode.childNodes[5].innerText=json[i].goods[j].num*json[i].goods[j].price;//个数*单价--在最后显示每样商品的总价
totalPrice()//计算所有店铺选中商品的总价格
}
}
}
}
function minus(that,num) {//-号按钮的作用
for (i in json){
for (j in json[i].goods){
if (json[i].goods[j].goodID==num) {
if (that.parentNode.childNodes[3].value==0){//如果数量num减到0，则不变化，始终为0
that.parentNode.childNodes[3].value=0;
}else {
that.parentNode.childNodes[3].value--;
//否则，num--
}
json[i].goods[j].num=that.parentNode.childNodes[3].value;//修改相应json的值
that.parentNode.childNodes[5].innerText=json[i].goods[j].num*json[i].goods[j].price;//个数*单价--在最后显示每样商品的总价
totalPrice()//计算所有店铺选中商品的总价格
}
}
}
}
function oCcheck(that,num) {//复选框点击事件的处理函数，传入参数this和此复选框对应的Id
for (i in json){
for (j in json[i].goods){
if (json[i].goods[j].goodID==num) {//用被点击的复选框Id去json里找到相应的goods里的元素
if (that.checked){//如果复选框选中
json[i].goods[j].checked=true;//修改被点击复选框相对应的值
totalPrice();//计算所有店铺选中商品的总价格
} else {
json[i].goods[j].checked=false;//修改被点击复选框相对应的值
totalPrice();//计算所有店铺选中商品的总价格
}
}
}
}
}
function totalPrice() {
let ototal=document.getElementById("total");//获取存储总价的节点
let price=0;//每次计算之前清0
for (i in json){
for (j in json[i].goods){
if (json[i].goods[j].checked==true){//判断goods元素中为true
price+=json[i].goods[j].num*json[i].goods[j].price;//个数*价格 累加
}
}
}
ototal.innerText="总价为："+price;//输出到页面
}
console.log(json);
document.getElementById("delete").onclick=function () {//删除复选框选中的节点
for (let i=0;i<json.length;i++){
for (let j=0;j<json[i].goods.length;j++){
if (json[i].goods[j].checked){
json[i].goods.splice(j,1);
j--;
}
}//清除goods中选中的元素
if (json[i].goods.length==0){
json.splice(i,1);
i--;
}//goods为空数组时，清除goods
}
document.getElementById("commodity").innerText="";//文本清空，清除京东自营，京东非自营，某某旗舰店
document.getElementById("total").innerText="总价为：0";//清空总价为0
ttus();//重新生成页面，此时json已经被修改过，不再生成ul，li，
}
</script>
</html>
相关文章：