js呼叫json裡面的資料，以及購物車的全選
阿新 • • 發佈：2018-12-28
json資料如下：
var json=[ // 兩個店鋪 { "shopname": "京東自營", "shopID": 101, // 商品 "goods": [ { "checked": false, "goodName": "三星 Galaxy A8s（SM-G8870） 黑瞳全視屏 6GB+128GB 外星銀 全網通4G 雙卡雙待", "goodID": 1001, "price": 1258, "num": 1, "src":"https://img12.360buyimg.com/n7/jfs/t1/26719/27/1139/321364/5c0f7d2dE26654912/9d2b78523e1bada3.jpg" }, { "checked": false, "goodName": "Apple iPhone X (A1865) 64GB 深空灰色 移動聯通電信4G", "goodID": 1002, "price": 9588, "num": 1, "src":"https://img13.360buyimg.com/n7/jfs/t10675/253/1344769770/66891/92d54ca4/59df2e7fN86c99a27.jpg" } ] }, { "shopname": "京東非自營", "shopID": 102, // 商品 "goods": [ { "checked": false, "goodName": " 榮耀MagicBook 14英寸輕薄窄邊框膝上型電腦（AMD銳龍5 8G 256G FHD IPS 正版Office）冰河銀 ", "goodID": 1003, "price": 9999, "num": 4, "src":"https://img11.360buyimg.com/n7/jfs/t1/8764/35/4810/207189/5bdbf117E35599536/b3c83c8d840a4017.jpg" }, { "checked": false, "goodName": " Apple MacBook Air 13.3英寸膝上型電腦 銀色(2017款Core i5 處理器/8GB記憶體/128GB快閃記憶體 MQD32CH/A) ", "goodID": 1004, "price": 15288, "num": 10, "src":"https://img11.360buyimg.com/n7/jfs/t14848/365/2076510540/93902/e5883831/5a6947e5N39e16ed8.jpg" } ] }, { "shopname": "淘寶旗艦店", "shopID": 103, // 商品 "goods": [ { "goodID": 1007, "checked": false, "goodName": "法國原瓶進口紅酒 奧瑞安雄獅乾紅葡萄酒 單瓶 750ml ", "price": 258, "num":1, "src":"https://img14.360buyimg.com/n7/jfs/t20320/316/1220830999/32913/4e1478d8/5b21e5d5Nf2360d0b.jpg" }, { "checked": false, "goodName": "海飛絲洗髮水套裝去屑去油500ml*2+400ml送清爽去油200ml（持久清爽控油 男士女士通用） ", "goodID": 1005, "price": 48, "num": 1, "src":"https://img14.360buyimg.com/n7/jfs/t1/6893/27/6871/296473/5be163d6E64230eff/8a6b0b1044407322.jpg" }, { "checked": false, "goodName": "一葉子面膜 營潤亮顏奢養禮盒30片 補水保溼黑麵膜 去黑頭 收縮毛孔 男女護膚品套裝 ", "goodID": 1006, "price": 5.22, "num": 5, "src":"https://img13.360buyimg.com/n7/jfs/t1/28023/8/110/249489/5c073bd7Ec9c95668/49093d4df4564bd1.jpg" } ] } ]
首先，先以購物車的效果進行一個大致佈局，這裡要注意一下標註的內容，後期是要刪除或者隱藏的。
<div class="daohang"> <ul style="border: none;"> <li style="border: none;"><input class="check" id="allIpt" type="checkbox">全選</li> <li style="margin-left: 130px;">商品資訊</li> <li style="margin-left: 145px;">商品引數</li> <li style="margin-left: 77px;">單價</li> <li style="margin-left: 76px;">數量</li> <li style="margin-left: 107px;">金額</li> <li style="margin-left: 60px;">操作</li> </ul> </div> <div class="box"> <!-- <div class="shop"> <label><input type="checkbox">店鋪：京東自營</label> <ul> <li> <span><input class="check" type="checkbox" /></span> <img src="https://img12.360buyimg.com/n7/jfs/t1/26719/27/1139/321364/5c0f7d2dE26654912/9d2b78523e1bada3.jpg" /> <p class="intro">三星 Galaxy A8s（SM-G8870） 黑瞳全視屏 6GB+128GB 外星銀 全網通4G 雙卡雙待</p> <p class="rank">規格：預設<br>尺寸：16*16*3（cm）</p> <p class="unit">￥2980</p> <div class="amount"> <input type="button" value="-" /> <input type="number" /> <input type="button" value="+" /> </div> <p class="monry">￥2980</p> <p class="remove">移除商品</p> </li> </ul> </div> --> </div>
css樣式：
<style> *{ margin: 0; padding: 0; list-style: none; } .box{ width: 1000px; margin: 0 auto; } .box div{ margin: 0 20px; } ul{ border: 2px solid #BCBCBC; } .box div ul li{ display: flex; margin-top: 20px; border-bottom: 1px solid #BCBCBC; } .box div ul li span{ margin-left: 20px; } .box div ul li img{ width: 120px; height: 100px; margin-bottom: 20px; } .intro{ width: 210px; color: darkslategray; font-size: 14px; padding-right: 20px; padding-left: 20px; } .rank{ width: 150px; font-size: 12px; color: dimgrey; } .unit{ width: 100px; } .amount{ width: 125px; } .amount input{ width: 20px; } .amount input:nth-of-type(2){ width: 40px; margin-left: -5px; margin-right: -5px; } .monry{ width: 100px; color: red; } .remove{ width: 100px; } .daohang{ width: 960px; height: 80px; margin: 0 auto; } .daohang ul{ display: flex; border: none; } .daohang ul li{ margin-top: 50px; border-bottom: none; } </style>
下面開始寫JS的內容：
<script src="js/json.js"></script>
<script>
// 遍歷內容,將所有購物車物品展示出來
function $(cl){
return document.getElementsByClassName(cl)[0]
}
json.forEach(function (item,index){
var oUl=document.createElement("ul");
item.goods.forEach(function(goods){
oUl.innerHTML += ` //引用之前寫好的css樣式
<li data-id="${goods.goodID}"> //${}呼叫json裡的資料
<span><input type="checkbox" class="shopG" /></span>
<img src="${goods.src}" alt=""/>
<p class="intro">${goods.goodName}</p>
<p class="rank">規格：預設<br>尺寸：16*16*3（cm）</p>
<p class="unit">${goods.price}</p>
<div class="amount">
<input type="button" value="-" onclick="add1(this,${goods.goodID})" />
<input type="number" value="${goods.num}" />
<input type="button" value="+" onclick="add2(this,${goods.goodID})" />
</div>
<p class="monry">${goods.price*goods.num}</p> //對物品進行價格計算
<p class="remove" >移除商品</p>
</li>
`
});
$("box").innerHTML +=
`
<div class="sox" >
<label><input data-shopID='${item.shopID}' class='shopS' type="checkbox" >店鋪：${item.shopname}</label>
<ul>${oUl.innerHTML}</ul>
</div>
`
});
</script>
下面開始做全選：
<!-- 全選 -->
<script>
// 全選
function $(id){
return document.getElementById(id);
}
function $C(cla){
return document.getElementsByClassName(cla);
}
$("allIpt").onclick=function(){
var that=this;
for(var i=0;i< $C("shopS").length;i++){
$C("shopS")[i].checked=this.checked;
}
for(var i=0;i< $C("shopG").length;i++){
$C("shopG")[i].checked=this.checked;
}
json.forEach(function(shop){
shop.goods.forEach(function(good){
good.checked=that.checked;
})
})
}
// 點選店鋪
for(var i=0;i< $C("shopS").length;i++){
$C("shopS")[i].onclick=function(){
var that=this;
var oPar = this.parentNode.parentNode;
var oSon = oPar.getElementsByClassName("shopG");
for(var j=0;j< oSon.length;j++){
oSon[j].checked=this.checked;
}
checkAll();
// 更換資料
json.forEach(function(shop){
if(shop.shopID==that.getAttribute("data-shopID")){
shop.goods.forEach(function(good){
good.checked=that.checked;
})
}
})
}
}
// 點選商品
// console.log(json)
for(var i=0;i< $C("shopG").length;i++){
$C("shopG")[i].onclick=function(){
var that=this;
var oDiv = this.parentNode.parentNode.parentNode.parentNode;
var oSon = oDiv.getElementsByClassName("shopG");
for(var i=0;i< oSon.length;i++){
if(!oSon[i].checked){
oDiv.firstElementChild.firstElementChild.checked=false;
break;
}else{
console.log(1)
oDiv.firstElementChild.firstElementChild.checked=true;
}
}
checkAll();
console.log(json)
var goodId=this.parentNode.parentNode.getAttribute("data-id");
json.forEach(function(shop){
shop.goods.forEach(function(good){
if(good.goodID==goodId){
console.log(goodId,good.goodID)
good.checked=that.checked;
}
})
})
}
}
// 判斷店鋪
function checkAll(){
for(var i=0;i< $C("shopS").length;i++){
if(!$C("shopS")[i].checked){
$("allIpt").checked=false;
break;
}else{
$("allIpt").checked=true;
}
}
}
