购物车_购物车push数组-CSDN博客

本文链接：https://blog.csdn.net/z946541/article/details/111500666

面向数据的操作
自我总结：特重要
// 对数据的操作全部根据id(唯一标识符)，来对数据的一系列操作
// 每一次操作都和数据中的id唯一标识符离不开，要对数据进行操作的是
// 根据id唯一标识符来操作，和id唯一标识符绑定起来

注( jq 自己重新导入图片自己更改)

网页代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="../jquery.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #goods{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
       .goods_items{
            width: 23%;
        }
        .goods_items img{
            width: 100%;
            /* height: 100%; */
        }
        #tbody img{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
  
        <div id="goods">

        </div>
        <div class="footer">
            <table border="1">
                <thead>
                    <tr>
                        <th>
                            全选<input type="checkbox" name="" id="All">
                        </th>
                        <th>商品</th>
                        <th>数量</th>
                        <th>单价</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="2"><button id="delAll">删除全部</button></th>
                        <th colspan="2"><button id="del2">删除选中</button></th>
                        <th colspan="2">合计:<span id="sum"></span></th>
                    </tr>
                </tfoot>
            </table>
        </div>
   
    <script src="./1.js"></script>
</body>
</html>

----------------------js代码

// 对数据的操作全部根据id(唯一标识符)，来对数据的一系列操作
// 每一次操作都和数据中的id唯一标识符离不开，要对数据进行操作的是
// 根据id唯一标识符来操作，和id唯一标识符绑定起来


// 模拟数据
var arr=[
    {"id":111,"img":"./imgs/1.jpg","title":"全新升级高配电脑","price":1000},
    {"id":222,"img":"./imgs/2.jpg","title":"电脑真皮沙发椅","price":2000},
    {"id":333,"img":"./imgs/3.jpg","title":"好运和田玉礼盒","price":3000},
    {"id":444,"img":"./imgs/4.jpg","title":"变频智能管控区","price":4000},
]
// 后台渲染商品数据
function goodsShow(){
    var str=``;
    for(var i=0;i<arr.length;i++){
       str+=`
       <div class="goods_items">
            <img src="${arr[i].img}" alt="">
            <p>${arr[i].title}</p>
            <p>￥<span>${arr[i].price}</span></p>
            <button οnclick=add(${arr[i].id})>添加购物车</button>
        </div>
       ` 
    }
    $("#goods").html(str);
    var div;
    if(arr.length%4==0){
        div=0;
    }else{
        div=4-arr.length%4;
    }
    for(var j = 0;j<div;j++){
        $("#goods").append(`<div class="goods_items"></div>`)
    }
}
goodsShow();
// 点击添加购物车声名一个空的数组，用来保存购物车数据
var gouWuCheArr=[];
function add(id){
    // 通过id找到下标并返回 下标
    var arrIndex=arr.findIndex(function(value){
        return value.id==id;
    })

    // 
    var gwcIndex=gouWuCheArr.findIndex(function(value){
        return value.id==id;
    })
    // 避免数据重复
    // 如果没有就arr当前下标添加一个num属性 =1 push,有的话就给当前
    // 下标的gouWuCheArr里面的num +1
    if(gwcIndex==-1){
        // 第一次进来都没有 通过一个给arr当前下标添加一个num属性 =1 ；
        // 然后push到购物车数组中
        arr[arrIndex].num=1;
        gouWuCheArr.push(arr[arrIndex])
    }else{
        // 有的话就给num添加 +1；来监控购物车数组中的数据
        gouWuCheArr[gwcIndex].num+=1;
    }
    //console.log(gouWuCheArr);
    gwcShow();

}
//渲染购物车数据
var sum=0;;
function gwcShow(){
    var str=``;
    for(var i = 0;i<gouWuCheArr.length;i++){
         str+=`
        <tr>
            <th>
                <input type="checkbox" name="" οninput="numON(${gouWuCheArr[i].id},event)" value="${gouWuCheArr[i].id}" >
            </th>
            <th><img src="${gouWuCheArr[i].img}" title="${gouWuCheArr[i].title}"></th>
            <th>
                <button οnclick="jian(${gouWuCheArr[i].id})">-</button>
                <input type="text" name="" id="num" value="${gouWuCheArr[i].num}" disabled >
                <button οnclick="jia(${gouWuCheArr[i].id})">+</button>
            </th>
            <th>${gouWuCheArr[i].price}</th>
            <th>${gouWuCheArr[i].price*gouWuCheArr[i].num}</th>
            <th><button οnclick=del(${gouWuCheArr[i].id})>删除</button></th>
        </tr> `;
      
    }
    $("#tbody").html(str);
   
}
//购物车的数量加减
{
    function jia(id){
        var index=gouWuCheArr.findIndex(function(value){
            return value.id==id
        })
        gouWuCheArr[index].num+=1;
        gwcShow()
    }
    function jian(id){
        var index=gouWuCheArr.findIndex(function(value){
            return value.id==id
        })
         gouWuCheArr[index].num-=1;
        if(gouWuCheArr[index].num==0){
            gouWuCheArr.splice(index,1)
        }
        gwcShow()
    }
}
// 删除del函数
function del(id){
    //console.log(id);
    var index=gouWuCheArr.findIndex(function(value){
        return value.id==id
    })
    //console.log(index);
    gouWuCheArr.splice(index,1)
    gwcShow();
}
// 删除全部
$("#delAll").on("click",function(){
    gouWuCheArr=[];
    gwcShow();
})


{   
    // 给全选框下面的每个子框添加value == id 属性(唯一标识符)来监控点击时的
    var checkId=[];//创建一个空数组监控点击全选是获取全部子框添加value也就是id(唯一标识符)
    //实现获取选中的子框的value  == id 然后给删除选中的每一项
    {
            //全选(实现全选或者全不选)
        $("#All").on("click",function(){
            var all=$(this).prop("checked");
            $("#tbody input:checkbox").each(function(i,v){
                    $(v).prop("checked",true)
                    if(all==true){
                        //全选的是获取子框的每一个value也就是id(唯一标识符)
                        checkId.push($(v).val())
                    }else{
                        //没有全选是空
                        checkId=[]
                        $(this).prop("checked",false)
                    }   
            })
            //console.log(checkId);
            sum1(checkId)
        })
        // 每个选框的
        function numON(id,e){
            // 获取当前点击发生点击事件的子框是否被选中
            var checked= e.target.checked;
            // 在checkId中查看是否有购物车中的id 有就返回下标
            var index= checkId.findIndex(function(v){
                return v ==id;
            })
            if(index==-1){
                //选中的 子框的value  == id
                if(checked == true){
                    checkId.push(id);
                }
            }else{
                // 如果 不选中 就删除  checked 中的 当前id
                //删除没有选中的子框的value  == id
                if(checked == false){
                checkId.splice(index,1)
                } 
            }
            if(checkId.length==gouWuCheArr.length){
                $("#All").prop("checked",true)
            }else{
                $("#All").prop("checked",false)
            }
            sum1(checkId) 
        }
    }
    //删除选中的
    $("#del2").on("click",function(){
           // 循环checkId 看checkId中是否在gouWuCheArr存在，存在就返回下标，然后删除
            for(var i=0;i<checkId.length;i++){
                var index=gouWuCheArr.findIndex(function(v){
                    return v.id==checkId[i];
                })
                gouWuCheArr.splice(index,1)
            }
            checkId=[]
            gwcShow()
            sum1(checkId)
            $("#All").prop("checked",false)
    })

}


// 合计
function sum1(checkId){
  var sum=0;
  for(var i=0;i<checkId.length;i++){
    var index=gouWuCheArr.findIndex(function(v){
        return v.id==checkId[i];
    })
    sum+=gouWuCheArr[index].price * gouWuCheArr[index].num;
  }
  $("#sum").text(sum);

}