仿写课堂中的购物车案例
仿写课堂中的购物车案例
// (一).导入购物车模块,获取data,total,totalMoney等数据import carts from./carts.js// console.log(carts.total,carts.totalMoney);//(二).获取dom元素const total = document.querySelector(.total)const totalMoney = document.querySelector(.totalMoney)const items = document.querySelectorAll(.carts-body > .item)// co搭建项目系统点我wcqh.cnnsole.log(items);// console.log(nums);//(三).渲染 total.textContent = carts.total totalMoney.textContent = carts.totalMoney // 循环渲染购物车的每个元素 items.forEach(function(item,index,arr){ item.querySelector(.id).textContent = carts.data[index].id item.querySelector(.name).textContent = carts.data[index].name item.querySelect搭建项目系统点我wcqh.cnor(.unit).textContent = carts.data[index].unit item.querySelector(.price).textContent = carts.data[index].price item.querySelector(.num).value = carts.data[index].num item.querySelector(.money).textContent = carts.data[index].money})// (四) 获取购物车中的单价,数量,金额分别组成数组,为更新购物车做准备const prices = document.querySelectorAll(.p搭建项目系统点我wcqh.cnrice)const nums = document.querySelectorAll(.num)const moneys = document.querySelectorAll(.money)const checks = document.querySelectorAll(.check) console.log(checks);/** * 分析: * 购物车中需要更新的数据:商品金额money,总数量total,总金额totalMoney * 要更新上面的数据,主要是依赖于更新单个商品的 数量num *///(五) 给商品数量的按钮添加change事件 nums.forEach(function(num,index,ar搭建项目系统点我wcqh.cnr){ num.onchange =function(){// 判断该商品是否被选中,如果选中才计算(js秉承错误优先原则)if(!checks[index].checked)returnfalse//1. 将每个数量取出来组成数组,再数组求和const numArr =[…arr].map(item=>parseInt(item.value)) total.textContent = numArr.reduce((pre,cur)=>pre + cur)//2. 计算总金额=获取数组,再数组求和const moneyArr =[…arr].map((price,index)=>prices[index].搭建项目系统点我wcqh.cntextContent * nums[index].value) totalMoney.textContent = moneyArr.reduce((pre,cur)=>pre + cur)//3.单个商品价格=数量*单个价格 moneys[index].textContent = num.value * prices[index].textContent}})//(六) 全选/全不选// 获取全选按钮const checkAll = document.querySelector(.check-all)let totalTmp = total.textContentlet totalMoneyTmp = totalMoney.text搭建项目系统点我wcqh.cnContent// console.log(checkAll);//为全选按钮添加事件 checkAll.onchange =function(){// 遍历当前所有选中按钮的状态,并将全选按钮的值复制给它 checks.forEach(item=>item.checked=checkAll.checked)if(checkAll.checked==false){let checkStatus =[…checks].every(function(check){return check.checked})if(checkStatus ==false){ total.textContent =0totalMon搭建项目系统点我wcqh.cney.textContent =0}}else{ total.textContent = totalTmp totalMoney.textContent = totalMoneyTmp }}// //遍历每个商品的复选框,并添加change事件 checks.forEach(function(check,index){ check.onchange =function(){//根据单个复选框状态来设置 全选按钮 checkAll.checked=[…checks].every(item=>item.checked)//every只要有一个选中,就返回true,从而checkall.checked就是true///搭建项目系统点我wcqh.cn/如果商品未选中,应该减去相对应的总数量和总金额if(check.checked==false){ total.textContent = total.textContent*1– nums[index].value*1 totalMoney.textContent = totalMoney.textContent*1– moneys[index].textContent*1}else{ total.textContent = total.textContent*1+ nums[index].value*1 totalMoney.textContent = totalMoney.textContent*1+ moneys[i搭建项目系统点我wcqh.cnndex].textContent*1}}})自己写了一遍,感觉还不是很通透.
© 版权声明
1.如需技术支持联系QQ：1339833655
2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
6. 如有链接无法下载、失效或广告，请联系管理员处理！
7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！
THE END
会员专属
暂无评论内容