数据驱动js购物车

html部分

<div class="zhuti">
        <div class="zhuti_shang">
            <ul class="list" type='none'></ul>
        </div>
        <div class="zhuti_xia">
            <p><input type="checkbox" class="ckall"> 全选</p>
            <span>总价￥<span class="totalPrice">0</span></span>
        </div>
        <div class="xinzeng">
            <input type="text" placeholder="商品id" class="spBid">
            <input type="text" placeholder="商品" class="spName">
            <input type="text" placeholder="价格" class="spPrice">
            <input type="text" placeholder="数量" class="spCount">
            <input type="button" value="新增" class="zengjia">
        </div>
        </div>

css

*{
            margin: 0;
            padding: 0;
        }
        .zhuti{
            width: 80%;
            margin: 0 auto;
        }
        .zhuti_xia{
            display: flex;
            justify-content: space-evenly;
        }
        .zhuti_shang{
            display: flex;
            justify-content: space-around;
        }
        .bid{
            padding-right: 30px;
            margin-top: 30px;
        }
        .minus,.add{
            padding: 5px;
        }
        .list li{
            margin-top: 20px;
        }
        .xinzeng{
            /* display: flex; */
            width: 50%;
            margin: 0 auto;
            /* border: 1px solid red; */
        }
        .xinzeng input{
            margin: 0 auto;
            
        }
        .xinzeng input:first-child{
            margin-left: 30px;
        }
        .xinzeng input:last-child{
            margin-left: 30px;
        }

js实现一些简单操作

<script>
    var data = [
        { pname:'上衣',price:300,count:1,bid:10,flag:false},
        { pname:'帽子',price:100,count:1,bid:201,flag:false},
        { pname:'裤子',price:200,count:1,bid:7,flag:false},
    ];
    // 获取div
    let ulObj = document.getElementsByClassName('list')[0];
    // 获取总价标签
    var totalPriceObj = document.getElementsByClassName('totalPrice')[0];
    // 获取全选
    let ckall = document.getElementsByClassName('ckall')[0]
    // console.log(ckall)
    // 新增
    let spBid = document.getElementsByClassName('spBid')[0]
    let spName = document.getElementsByClassName('spName')[0]
    let spPrice = document.getElementsByClassName('spPrice')[0]
    let spCount = document.getElementsByClassName('spCount')[0]
    let zengjia = document.getElementsByClassName('zengjia')[0]
    // 分装渲染的html
    // 根据数据渲染html结构
    function show(obj) {
        ulObj.innerHTML = "";
        // 存储购物车总价的变量
        let totalPrice = 0;
        obj.forEach(function (value, index) {
          var liEle = document.createElement("li");
          liEle.innerHTML = `
                    <span class="bid">${value.bid}</span>
                    <input type="checkbox" class="ck">
                    <h4>${value.pname}</h4>
                    <span class="singlePrice">￥${value.price}</span>
                    <input type="button" value="-" class="minus">
                    <input type="text" value="${value.count}" class="count">
                    <input type="button" value="+" class="add">
                    <span class="">${value.price * value.count}</span>
                    <input type="button" value="删除" class="delete">
                `;
          liEle.getElementsByClassName("ck")[0].checked = value.flag;
          ulObj.appendChild(liEle);
            // 计算购物车总价的逻辑
            // 判断每个数组元素value的flag值，为true进行累加
            if (value.flag) {
            totalPrice += value.price * value.count;
          }
          

        //   var dianji = false
          //全选
          
            //   dianji = true
            // if(dianji == true){
            //     data.children.flag = !data.children.flag
            //     // dianji =false
            // }else{

            // }
          

        });
        // 赋值过程放forEach()外面
        totalPriceObj.innerText = totalPrice;

      }
    show(data)

    // 新增
    zengjia.onclick = function(){
        // 正则通过才可以提交
        if(spBid.onblur()&&spPrice.onblur()&&spCount.onblur()){
            
            var spBid1 = spBid.value
        var spName1 = spName.value;
        var spPrice1 = spPrice.value;
        var spCount1 = spCount.value;

        var wa ={
            bid:spBid1,
            pname:spName1,
            price:spPrice1,
            count:spCount1
        }
        data.push(wa)
        show(data)
        spBid.value='';
        spName.value='';
        spPrice.value='';
        spCount.value='';
        }
        
        
    }
    // 正则验证，返回布尔值
    function checkReg(reg,ele){
        return reg.test(ele.value);
    }
    //id输入框失焦
    spBid.onblur = function(){
        if(checkReg(/^\d+$/,spBid)){
            this.style.border = '3px solid green';
            return true;
        }else{
            alert('id输入格式有误')
            spBid.value=''
            this.style.border = '3px solid black';
        }
    }
    spPrice.onblur = function(){
        if(checkReg(/^\d+$/,spPrice)){
            this.style.border = '3px solid green';
            return true;
        }else{
            alert('价格输入格式有误')
            spPrice.value=''
            this.style.border = '3px solid black';
        }
    }
    spCount.onblur = function(){
        if(checkReg(/^\d+$/,spCount)){
            this.style.border = '3px solid green';
            return true;
        }else{
            alert('数量输入格式有误')
            spCount.value=''
            this.style.border = '3px solid black';
        }
    }

    // 封装函数获取点击按钮索引
    function getIndex(ele) {
        let curBid = ele.parentNode.getElementsByClassName("bid")[0].innerText;
        let index = data.findIndex((item) => {  //放回与点击相同的bid
          return item.bid == curBid;
        });
        return index;
      }
    //   console.log(data[0].flag)
      //全选
      var dianji = true;
      ckall.onclick = function(){
        if(dianji ==true){
            for(var i=0;i<data.length;i++){
                data[i].flag = true
                console.log(data[i].flag)
                show(data)
            }
            dianji = false
        }else{
            for(var i=0;i<data.length;i++){
                data[i].flag = false
                console.log(data[i].flag)
                show(data)
                dianji = true
            }
            // console.log()
        }
      }
      
    
    // 绑定点击事件
    ulObj.onclick = function(e){
        var ele=e.target;
        console.log(ele)
        var eleClassName = ele.className;
        if(eleClassName =='ck'){
            //单选
            let index = getIndex(ele);
            data[index].flag=!data[index].flag
            show(data);
            //减号
        }else if(eleClassName =='minus'){
            let index = getIndex(ele);
            if((data[index].count--)<=1){
                alert('数量不可为负数')
            }else{
                show(data);
            }
            //加号
        }else if(eleClassName =='add'){
            let index = getIndex(ele);

            console.log(getIndex(ele))
            data[index].count++;
            show(data);
        
        }else if(eleClassName =='delete'){
            // console.log('11')
            let index = getIndex(ele);
            
            
            // var suo = data[index].findIndex(data)
            console.log(index)
            data.splice([index],1) 
            show(data);
        }
        ulObj.onchange = function(e){
            if(eleClassName =='count'){
            let index = getIndex(ele);
            data[index].count=e.target.value
            show(data)
        }
        

            // let index = getIndex(ele);
            // var shuliang = data[index].count.value
            // // console.log(shuliang)
            // shuliang.onchange(function(){
            //     alert('被修改')
            // })
        }
    }

    

    
</script>