仿写购物车项目
总结:
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').textContent = 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.total
totalMoney.textContent = carts.totalMoney
const 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((num, index, arr)=>{
num.onchange = ()=>{
if(!checks[index].checked) return false
monies[index].textContent = prices[index].textContent * num.value
const numArr = [...arr].map((item)=> parseInt(item.value))
total.textContent = numArr.reduce((pre, cur)=>pre + cur)
const moneyArr = [...monies].map((item)=> parseFloat(item.textContent))
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 itemStatus = [...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.checked == 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赋值改为count = data[index]就可以把原始赋值带入;计划后续有时间自己再完全重写一遍购物车项目,包括CSS、html和js部分全部重写。
【文章原创作者:cc防御 http://www.558idc.com/gfip.html提供,感恩】