07-16作业


//功能全选和全不选的功能
//1.全选复选框
const checkAll =document.querySelector('#check-all');
//2.每个商品的复选框
const checkItems =document.getElementsByName("item");
//change 当控件的值发生变量的时候 触发它
//console.log(checkAll.checked);
//3.每个商品状态必须和全选复选框同步变化
checkAll.onchange = (ev)=>
    checkItems.forEach(((item)=>
            item.checked= ev.target.checked
    ));
//4.根据每个商品的复选框状态，动态设置全选框的状态
//checkITems.forEach(item=>item.onchange=()=>chenckIT)
checkItems.forEach(function(item){
    item.onchange=function(){
        let res=[...checkItems].every(function(item){
            return item.checked;
        });
        checkAll.checked=res;
    }
})
//简化版
//checkItems.forEach(item=>(item.onchange=()=>(checkAll.checked=[...checkItems].every(item=>))))
//功能二：自动计算
//功能：分析所有的计算，都是基于“数量的变化",第一步就要获取所有商品的数量控件
  const numInput= document.querySelectorAll('input[type="number"]');
 // console.log(numInput);
 //给一个数量控件绑定一事件
//当控件的值发生变化的是Hi好，自动进行重新计算
 numInput.forEach(input=>(input.onchange=autoCalculate));
 function autoCalculate(){
     //第一步 获取每个商品的金额=数量 * 单价
     //数量 ,当前有多个商品，所以呀应该返回有数组成的集合
     const numbers = document.querySelectorAll('input[type="number"]');
     console.log(numbers);
     console.log([...numbers]);
    // [...numbers].forEach(num=>console.log(typeof parseInt(num.value)));
  //[...numbers].forEach(num=>console.log(num.value * 1));
    const numArr =[...numbers].map  (num=>num.value * 1);
    console.log(numArr);
    //获取单价组成的数组
     const prices = document.querySelectorAll("tbody .price");
     console.log(prices);
     //const numbers =document.querySelectorAll('input[type="number]');
    const priceArr=[...prices].map(price=>price.textContent * 1);
    console.log(numArr,priceArr);
   const amountArr= [priceArr,numArr].reduce((prve,curr)=>prve.map((item,key)=>item*curr[key]));
   console.log(amountArr);
   //第二步 商品总数
    let sum=numArr.reduce((prev,curr)=>prev+curr);
     //第三步 所有的商品总金额
     let  total =amountArr.reduce((prev,curr)=>prev+curr);
     //第四步 讲以上计算的结果，渲染到页面上
   document.querySelectORAll('.amount').forEache((item,index)=>(item.textContent=amountArr[index]));
   document.querySelector("#sum").textContent=sum;
   document.querySelector("#total-amount").textContent=total;
 }
更多相关文章

随机推荐
