js调用json里面的数据，以及购物车的全选

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;}}    }

js调用json里面的数据，以及购物车的全选相关推荐

前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言需求分析一个Get实例浏览器请求 SoapUI软件请求一个Post实例浏览器请求 SoapUI软件请求 1.Http简介( ...
2021-7-12 js解析json时取出数据为undefined
bug 记录描述: js解析json时取出数据为undefined. 思路 bug 记录说明一.解决二.分析总结说明一.解决 var result=eval("(&quo ...
Flutter实战视频-移动电商-60.购物车_全选按钮的交互效果制作
60.购物车_全选按钮的交互效果制作主要做全选和复选框的这两个功能 provide/cart.dart 业务逻辑写到provide里面先持久化取出来字符串,把字符串编程list.循环list ca ...
模拟购物车页面全选单选的金额累加
1.前面部分的内容就不过多说明了,就是OkGo请求数据然后封装适配器加入数据源,先上代码先上适配器的代码,注意这里使用的万能适配器,加入依赖 implementation 'com.github.C ...
小程序购物车优化全选，反选，单选控制价格等
有需求的可以直接复制看看,几乎都会有注释  <view class='container'><!-- 加入的商品列表 - ...
android二级联动购物车,Android实现二级购物车的全选加反选、总价功能
本文实例为大家分享了Android实现二级购物车的全选加反选.总价的具体代码,供大家参考,具体内容如下 MainActivity import android.support.v7.app.AppCo ...
uniapp手写购物车单选全选反选
uniapp手写购物车单选全选反选这里是用图片切换的方法显示没有用到 checkbox 单选选项图片判断切换全选选项图片判断切换这里是用图片切换的方法显示没有用到 checkbox ...
原生js调用json方法
原文链接 Ajax基础 ajax:无刷新数据读取,读取服务器上的信息 HTTP请求方法: GET:用于获取数据,如浏览帖子 ajax.judgeXmlHttpRequest('get', 'index ...
python获取mysql中的数据供js调用_python 读取mysql数据至csv文件中，并发送邮件
test 代码: #coding:utf-8 ''' Created on 2019年2月18日 @author: Administrator ''' import ConfigParser impo ...

js调用json里面的数据，以及购物车的全选

js调用json里面的数据，以及购物车的全选相关推荐

最新文章

热门文章