仿写购物车项目-青狐资源网

仿写购物车项目

import carts from “./carts.js”const items = document.querySelectorAll(.carts-body .item)const total = document.querySelector(.total)const totalMoney = document.querySelector(.total-money) items.forEach((item, index)=>{ item.querySelector(.id).textContent = carts.data[index].id item.querySelector(.name).textCo系统开发mhkj33ntent= carts.data[index].name item.querySelector(.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}) total.textContent = carts.totaltotal系统开发mhkj33Money.textContent = carts.totalMoneyconst prices = document.querySelectorAll(.carts-body .price)const nums = document.querySelectorAll(.carts-body .num)const monies = document.querySelectorAll(.carts-body .money)const checks = document.querySelectorAll(.carts-body .check)// forEach(在遍历的数组，数组的索引，数组) nums.forEach((n系统开发mhkj33um, index, arr)=>{ num.onchange =()=>{if(!checks[index].checked)returnfalse monies[index].textContent = prices[index].textContent * num.valueconst numArr =[…arr].map((item)=> parseInt(item.value)) total.textContent = numArr.reduce((pre, cur)=>pre + cur)const moneyArr =[…monies].map((item)=> parseFloat(item.textConte系统开发mhkj33nt)) totalMoney.textContent = moneyArr.reduce((pre, cur)=>pre + cur)}})const checkAll = document.querySelector(.check-all) let totalTmp = total.textContent let totalMoneyTmp = totalMoney.textContent checkAll.onchange =()=>{ checks.forEach((check)=>check.checked = checkAll.checked)if(checkAll.checked ==false){let itemSta系统开发mhkj33tus=[…checks].every(item=>item.checked ==false)if(itemStatus ==true){ total.textContent =0 totalMoney.textContent =0}}else{ total.textContent = totalTmp totalMoney.textContent = totalMoneyTmp}} checks.forEach((check, index)=>{ check.onchange =()=>{ checkAll.checked =[…checks].every(item=>item.checked)if(check.che系统开发mhkj33cked==false){ total.textContent -= nums[index].value totalMoney.textContent -= monies[index].textContent}else{ total.textContent = total.textContent *1+ nums[index].value *1 totalMoney.textContent = totalMoney.textContent *1+ monies[index].textContent *1}}})

总结：

把购物车项目js部分边看边写了一遍，把所有函数都变为箭头函数，简化代码，条理也很清楚；投票项目中把count赋值改系统开发mhkj33为count = data[index]就可以把原始赋值带入；计划后续有时间自己再完全重写一遍购物车项目，包括CSS、html和js部分全部重写。

批改老师：

PHPz 批改状态：合格老师批语：

作者最新博文

开通PHP中文网博客第一天

2023-03-08 14:59:36

1.如需技术支持联系QQ：1339833655 2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！ 4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！ 5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 6. 如有链接无法下载、失效或广告，请联系管理员处理！ 7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！ 8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！

THE END