购物车

系统管理员 2022-12-29 09:41 238阅读 0赞

**面向数据的操作**  
自我总结：特重要  
// 对数据的操作全部根据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);
    
    }