『 高达 购物车案例 』jQuery Java Script 全功能实现【超详细 代码分析】

🚩 祝大家五一快乐，希望大家在今天代码无 bug！！！

• 🏆 作者昵称：'' 卡卡西最近怎么样 ''

• 🏆 作者主页：卡卡西最近怎么样的博客_CSDN博客-JavaScript,jQuery领域博主
• 🏆 欢迎各位大佬们：点赞👍 收藏💖 关注🤝 留言💬
• 🏆 如有错误有各位大佬错误请指正！！星光不问赶路人，大家一起进步沉淀！

完整代码压缩包资源：

高达购物车案例资源，jQuery+JavaScript实现-Javascript文档类资源-CSDN文库https://download.csdn.net/download/weixin_52212950/85252596

文章目录：

🔊 一：前言

🔊 二：购物车页面及功能实现展示  

🔊 三：代码分析 

3.1 全选单选切换思路分析

思路：

全选单选切换代码 ： 

3.2 商品小计加减 及 单总价 思路分析 

思路：

商品小计及单总价变化代码： 

  3.3 总价函数 思路分析

思路：

 总价函数代码：

3.4 删除单个物品思路分析  

思路：

 删除单个物品代码：

3.5 删除全部物品思路分析

思路：

删除全部物品代码：

 🔊 四：完整代码

4.1 HTML+CSS 文件 ： 

4.2 jQuery + Java Script 文件：

一：前言：

        文章的由来必然是热爱，由于热爱高达模型，也经常逛万代商城了解这些，我相信大部分学软件的我们难免都会有想过写一个自己的网站，此篇文章就是作者对于高达的热爱写的一个功能齐全的高达购物车来作为自己学习某一阶段的检测，使用了 jQuery + Java Script 实现，页面结构条理易读，最主要可以直接拿来 copy，大家一起往下看吧！！

 二：购物车页面及功能实现展示  

 主页面： 

全选勾选页面： 

商品默认均为一件，取消任何一个单选全选会取消，单选全选上全选也会勾选

商品数更改及总价格更改页面： 

如果左侧没有勾选，则单个的价格不会加到下方总价中，物品数量默认为1 ，不会为负数

删除商品页面：

点击右侧删除按钮，可以将此删除对应的物品删除掉 

清空所有宝贝页面： 

清空所有宝贝会有弹窗确认，确认则删除，不确认则返回不删除任何物品

成功清空页面： 

 成功清空会有无宝贝的底层提示，如删除前有总价格与全选，清空后也会取消与清零 

空购物车再清空页面弹窗：

当购物车已经为空时再点击清空按钮，则会弹出以及为空无法清空的弹窗

三：代码分析 

3.1 全选单选切换思路分析

<- 这版块使用 jQuery 实现 ->

思路：

• 首先注册全选按钮的点击切换 change 事件，通过 jQuery 属性操作 prop 将当前点击的全选按钮的 checked 属性的属性值赋值给每一个单选的按钮的 checked 属性值，使其单选后全部勾选。
• 单选全选后全选勾选也是一样的原理，如果勾选的单选框的 length 数量等于单选框的数量，则全选按钮勾选，否则不勾选。

⚠ 注意：下方代码是总价格改变的代码，与此功能按钮切换无关

 if($(this).prop('checked')==true){  //此代码是总价格改变的判断代码，与此功能无关
           allprice()  //总价函数
        }else if($(this).prop('checked')==false){
           allprice()  //总价函数
        }复制

全选单选切换代码 ： 

$(function(){
    $('.qx').change(function(){
        // 测试 点击全选输出true/false console.log($(this).prop('checked'));
        $('.check').prop('checked',$(this).prop('checked'));
            allprice();  //总价函数
    })
    $('.check').change(function(){
        if($(this).prop('checked')==true){  //此代码是总价格改变的判断代码，与此功能无关
           allprice()  //总价函数
        }else if($(this).prop('checked')==false){
           allprice()  //总价函数
        }
        else if($('.check:checked').length==$('.check').length){
            $('.qx').prop('checked',true);
        }else{
            $('.qx').prop('checked',false);
        }
    })复制

3.2 商品小计加减 及 单总价 思路分析 

<- 这版块使用 jQuery 实现 ->

思路：

• 分两个版块实现，分别是左侧减数量按钮点击事件和右侧加数量点击事件，该板块主要点在于获取到三个不同层级的内容，这就需要使用文本操作 text() 或者 html()，以及筛选方法，此处主要用到 parent() 找父级与 siblings() 找兄弟级，思路就是点击增减键后先获取到当前的数量值，自增或自减后再赋值给当前数量的文本，就可以达到增减数量小计的操作。
• 对于单总价的思路就是，小计数量*商品单价，此处我们还用以上筛选方法获取到单价框中的单价值，注意此处获得到的单价值为‘￥xxx’，我们要用字符串操作 substr 截取只得到数值，去掉人民币符号

⚠ 注意：text() 得到的是字符串类型，自增减会自动隐式转换，所以可以自增减，对于单价来说，得到的去掉￥符号的单价也是字符串，相乘时要用 parseInt 转为数字型

拓展：

•  在此代码中我们使用了两次 parent() 才获取到目标的父级，在实际开发中我们可以采用 parents() 方法，这个方法可以找所有的祖先级，在祖先级中匹配目标父级的类即可快速找到，大大减少代码冗余
• toFixed ( number ) 可以设置保留几位小数，number为要保留的位数，如果各位的单价为小数可以自行添加此方法，保留两位：toFixed ( 2 ) 

商品小计及单总价变化代码： 

//add 变化,text()获取来的是string类型，自增会隐式转换
    $('.number-right').click(function(){
       var num=$(this).siblings('.number-center').text();
       num++;
       $(this).siblings('.number-center').text(num)
       //得到点击加号的物品的价格--->'￥xxx'
       var a=$(this).parent().parent().siblings('.price').children('div').text();
       console.log(a.length);
       //去掉￥符号
       var single_price=parseInt(a.substr(1,a.length-1))
       //赋值
       $(this).parent().parent().siblings('.allprice').find('.num').text(single_price*num)
       allprice()  //总价函数
    })
    $('.number-left').click(function(){
        if($(this).siblings('.number-center').text()=='1'){
            $(this).siblings('.number-center').text('1');
            $(this).parent().parent().siblings('.allprice').find('.num').text($(this).parent().parent().siblings('.price').children('div').text().substr(1,a.length-1))
        }else{
            var num=$(this).siblings('.number-center').text();
            num--;
            $(this).siblings('.number-center').text(num)
            //得到点击加号的物品的价格--->'￥xxx'，注意此处可以使用parents()来代替parent().parent()
            var a=$(this).parent().parent().siblings('.price').children('div').text();
            //去掉￥符号
            var single_price=parseInt(a.substr(1,a.length-1))
            //赋值
            $(this).parent().parent().siblings('.allprice').find('.num').text(single_price*num)
            allprice() //总价函数
        }
     })
})复制

  3.3 总价函数 思路分析

<- 这版块是一个此案例多次调用的总价函数allprice() ->

思路：

最主要的思想：每个物品的单选框有没有选中，只有选上的总单价才会被加到单价中，因此只需要在该函数中判断有没有选中并赋值即可

• 我们有很多因素都能影响总价格，例如我们已经勾选了某些物品，但是我们再增加数量，价格会变导致总价也会变，但是没有勾选的物品增加数量，总价就不会变，再或者是删掉物品时，勾选的商品被删掉，总价也会被减去，总而言之，就是很多操作都会改变总价格，对此我们很容易想到单独写一个函数将总价获取封装，每次改变总价操作后调用一次即可
• 函数思路是设置一个总价 sum，由于其最主要的思想就是每个物品的单选框有没有选中，在函数里面判断是否选中，如果选中了，则将该物品总单价赋给其单独的一个 sum1（注意此处并不是总价 sum，案例有四个物品，设置了sum1，sum2，sum3，sum4 进行判断赋值），如果没有选中，则给其该物品的 sum1 赋值为0，四个判断完后我们就可以将其四个值相加，选中的就有其单个物品的总价格，没选中就是 0 去相加，及 sum=sum1+sum2+sum3+sum4

举例一个判断：这个代码是我们第一个物品的判断，根据我们刚才的思想，这个代码意思为：如果第一个物品选中了，则将其总单价赋值给 sum1，没选就赋值0，最后再用 sum1 去相加各个物品的 sum2，sum3 ....... 最后再将总 sum 赋值给总价即可

var price1=parseInt($('.heji1').siblings('.num').text())
if($('.xz-1').children('.check').prop('checked')==true){ //判断第一个全选是否选上
        var sum1=price1
    }else{
        sum1=0
    }复制

 总价函数代码：

function allprice(){
    var sum=0;
    var price1=parseInt($('.heji1').siblings('.num').text())
    var price2=parseInt($('.heji2').siblings('.num').text())
    var price3=parseInt($('.heji3').siblings('.num').text())
    var price4=parseInt($('.heji4').siblings('.num').text())
    if($('.xz-1').children('.check').prop('checked')==true){ //判断第一个全选是否选上
        var sum1=price1
    }else{
        sum1=0
    }
    if($('.xz-2').children('.check').prop('checked')==true){  //判断第二个全选是否选上
        var sum2=price2
    }else{
        sum2=0
    }
    if($('.xz-3').children('.check').prop('checked')==true){  //判断第三个全选是否选上
        var sum3=price3
    }else{
        sum3=0
    }
    if($('.xz-4').children('.check').prop('checked')==true){  //判断第四个全选是否选上
        var sum4=price4
    }else{
        sum4=0
    }
    sum=sum1+sum2+sum3+sum4
    console.log(sum);
    $('.price-a').text(sum);
}复制

3.4 删除单个物品思路分析  

<- 这版块使用 原生 Java Script 实现 ->

思路：

• 用到了节点操作之删除节点：removechild()，此版块不难很容易实现，for 循环遍历每一个 del 删除按钮，给每个按钮绑定一个删除节点的操作即可，此处删除的是父节点的父节点：this.parentNode.parentNode

⚠ 注意：删除后要调用 总价函数 allprice() 判断更改总价值

 删除单个物品代码：

    for(var i=0;i<delbtn.length;i++){
       delbtn[i].addEventListener('click',function(){
        // 测试用的   
        // console.log(objects.length);
        // console.log(main.children.length);
           main.removeChild(this.parentNode.parentNode)
           allprice()
           if(main.children.length==0){
               nullbgimg.style.display='block'
               nullbgtext.style.display='block'
               qx.checked=false;
           }
       })
    }复制

3.5 删除全部物品思路分析

<- 这版块使用 原生 Java Script 实现 ->

思路：

• 此版块也无难点，唯一需要注意的地方就是：我在这里用的是，点击全删按钮并判断确认后使用循环遍历每一件商品，每遍历一次就删除第一件商品，直到删完，这就需要我们保证遍历过程中的数量是不变的（意思就是我们 for 循环中小于的那个值），此处如果使用 i<main.children.length，则我们需要点两次删除才能删完，这是因为删除过程中其 main.children 的数量是在不断减少的，因此需要点两次，如何解决？
• 要解决这个问题，我们就要选择一个不变的值，此处我选择了 objects.length，objects 是获取来的 DOM 对象，开始获取到几个它的值就是几个，及时物品被删除其值也不会变

⚠ 注意：此处我选择的方法较为笨，还有很多容易的方法可以实现，包括更容易的 jQuery，大家自行看着更改更聪明的方法

删除全部物品代码：

 clearbtn.addEventListener('click',function(){
        if(main.children.length==0){
            nullalert.style.display='block';
            mask.style.display='block'
            nullbtn.addEventListener('click',function(){
                nullalert.style.display='none';
                mask.style.display='none'
                nullbgimg.style.display='block'
                nullbgtext.style.display='block'
            })
        }else{
            alert.style.display='block';
            mask.style.display='block'
            yes.addEventListener('click',function(){
                 alert.style.display='none';
                 mask.style.display='none';
                 for(var i=0;i<objects.length;i++){
                     main.removeChild(main.children[0])
                 }
                 allprice()
                 qx.checked=false
                 nullbgimg.style.display='block'
                 nullbgtext.style.display='block'
             })
             no.addEventListener('click',function(){
                 alert.style.display='none';
                 mask.style.display='none';
             })
         }
    })复制

 四：完整代码

      完整代码两部分，注意分两个文件，还有jQuery文件需自行引入，再有就是注意引入文件的路径自行更改

4.1 HTML+CSS 文件 ： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购物车</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: rgb(255, 240, 222);
        }
        .mask{
            display: none;
            position: absolute;
            z-index: 10;
            width: 1440px;
            height: 845px;
            background-color: rgba(0, 0, 0, 0.517);
        }
        .left{
            /* display: none; */
            position: relative;
            box-sizing: border-box;
            width: 100px;
            height: 843px;
            margin: 10px;
            margin-top: 0;
            float: left;
            /* background-color: rgb(255, 164, 59); */
            background-color: rgb(255, 197, 111);
            border: 1.3px solid black;
            border-top: 15px solid rgb(150, 150, 150);
        }
        .right{
            position: relative;
            /* display: none; */
          float: left;
          box-sizing: border-box;
          width: 1300px;
          height: 843px;
        }
        .left .left-img{
            position: absolute;
            top: 19px;
            left: 19px;
            width: 65px;
            height: 65px;
        }
        .left ul{
            box-sizing: border-box;
            position: absolute;
            top: 130px;
            border-top: 3px solid #fff;
            width: 98px;
        }
        .left ul li{
            box-sizing: border-box;
            list-style: none;
            width: 98px;
            height: 130px;
            border-bottom: 3px solid rgb(255, 255, 255);
            /* background-color: rgb(255, 186, 108); */
            background-color: rgb(255, 200, 119);
            color: rgb(255, 255, 255);
            font-size: 22px;
            font-weight: bold;
            text-shadow: 2px 2px 2px rgb(77, 77, 77);
            text-align: center;
            padding-left: 18px;
            padding-right: 18px;
            padding-top: 22px;
            line-height: 40px;
            cursor: pointer;
        }
        .left ul li:hover{
            background-color: rgb(255, 219, 172);
        }
        .banner{
            position: relative;
            box-sizing: border-box;
            width: 1300px;
            height: 130px;
            /* background-color: rgb(255, 164, 59); */
            background-color: rgb(255, 200, 116);
            margin: 0 auto;
            margin-bottom: 9px;
            border: 1.3px solid black;
            border-top: 15px solid rgb(150, 150, 150);
        }
        .banner img{
            position: absolute;
            top: 22px;
            left: 50px;
            float: left;
            width: 60px;
            height: 60px;
        }
        .banner p{
            position: absolute;
            left: 130px;
            top: 35px;
            float: left;
            font-size: 27px;
            font-weight: bold;
            text-shadow: 2px 2px 2px grey;
            color: #fff;
        }
        .search-box{
            position: relative;
            width: 700px;
            height: 114px;
            box-sizing: border-box;
            float: right;
            /* background-color: rgb(255, 188, 188); */
        }
        .search{
            box-sizing: border-box;
            float: left;
            position: absolute;
            top: 35px;
            left: 180px;
            width: 370px;
            height: 50px;
            padding-left: 20px;
             -webkit-border-radius:40px;
           -moz-border-radius:40px;
           font-size: 20px;
           font-weight: bold;
           color: rgb(71, 71, 71);
           border: 1.3px solid rgb(78, 78, 78);
           outline: none;
        }
        .banner .search-img{
            position: absolute;
            float: left;
            top: 33px;
            left: 562px;
            width: 50px;
            height: 50px;
        }
        ::placeholder{
            color: rgb(181, 181, 181);
        }
       .object{
           /* display: none; */
           box-sizing: border-box;
           width: 1300px;
           height: 220px;
           margin: 0 auto ;
           margin-bottom: 15px;
           border: 1.3px solid rgb(90, 90, 90);
           background-color: rgb(243, 243, 243);
           border-top: 6px solid rgb(194, 194, 194);
       }
       .main{
           width: 1300px;
           height: 615px;
           box-sizing: border-box;
           overflow-y: scroll;
       }
       .buybox{
           box-sizing: border-box;
           width: 1300px;
           height: 90px;
           margin: 0 auto ;
           margin-bottom: 20px;
           border: 1.3px solid rgb(90, 90, 90);
           background-color: rgb(255, 226, 183);
       }
       .xz-1{
          box-sizing: border-box;
          position: relative;
          float: left;
          width: 100px;
          height: 212.7px;
       }
       .xz-2{
          box-sizing: border-box;
          position: relative;
          float: left;
          width: 100px;
          height: 212.7px;
       }
       .xz-3{
          box-sizing: border-box;
          position: relative;
          float: left;
          width: 100px;
          height: 212.7px;
       }
       .xz-4{
          box-sizing: border-box;
          position: relative;
          float: left;
          width: 100px;
          height: 212.7px;
       }
       .img-1{
           box-sizing: border-box;
           position: relative;
           float: left;
           width: 190px;
           height: 212.7px;
       }
       .img-2{
           box-sizing: border-box;
           position: relative;
           float: left;
           width: 190px;
           height: 212.7px;
       }
       .img-3{
           box-sizing: border-box;
           position: relative;
           float: left;
           width: 190px;
           height: 212.7px;
       }
       .img-4{
           box-sizing: border-box;
           position: relative;
           float: left;
           width: 190px;
           height: 212.7px;
       }
       .information-1{
           box-sizing: border-box;
           float: left;
           width: 280px;
           height: 212.7px;
           /* background-color: rgb(255, 219, 219); */
           margin-right: 100px;
           padding-left: 20px;
           padding-top: 30px;
           padding-right: 5px;
           font-size: 17px;
           font-weight: bold;
           color: rgb(68, 68, 68);
           text-shadow: 2px 2px 2px #fff;
       }
       .information-2{
           box-sizing: border-box;
           float: left;
           width: 280px;
           height: 212.7px;
           /* background-color: rgb(255, 219, 219); */
           margin-right: 100px;
           padding-left: 20px;
           padding-right: 5px;
           padding-top: 30px;
           font-size: 17px;
           font-weight: bold;
           color: rgb(68, 68, 68);
           text-shadow: 2px 2px 2px #fff;
       }
       .information-3{
           box-sizing: border-box;
           float: left;
           width: 280px;
           height: 212.7px;
           /* background-color: rgb(255, 219, 219); */
           margin-right: 100px;
           padding-left: 20px;
           padding-right: 5px;
           padding-top: 30px;
           font-size: 17px;
           font-weight: bold;
           color: rgb(68, 68, 68);
           text-shadow: 2px 2px 2px #fff;
       }
       .information-4{
           box-sizing: border-box;
           float: left;
           width: 280px;
           height: 212.7px;
           /* background-color: rgb(255, 219, 219); */
           margin-right: 100px;
           padding-left: 20px;
           padding-right: 5px;
           padding-top: 30px;
           font-size: 17px;
           font-weight: bold;
           color: rgb(68, 68, 68);
           text-shadow: 2px 2px 2px #fff;
       }
       .price{
           position: relative;
           left: -55px;
           box-sizing: border-box;
           float: left;
           width: 140px;
           height: 212.7px;
           /* background-color: rgb(212, 196, 196); */
           padding-top: 26px;
           font-size: 28px;
           font-weight: bold;
           color: rgb(255, 5, 5);
       }
       .price span{
           text-decoration: line-through;
           font-size: 18px;
           color: rgb(58, 58, 58);
       }
       
       .number-1{
           box-sizing: border-box;
           position: relative;
           float: left;
           width: 200px;
           height: 212.7px;
           left: -20px;
           /* background-color: rgb(255, 219, 219); */
       }
       .number-2{
           box-sizing: border-box;
           position: relative;
           float: left;
           width: 200px;
           height: 212.7px;
           left: -20px;
           /* background-color: rgb(255, 219, 219); */
       }
       .number-3{
           box-sizing: border-box;
           position: relative;
           float: left;
           width: 200px;
           height: 212.7px;
           left: -20px;
           /* background-color: rgb(255, 219, 219); */
       }
       .number-4{
           box-sizing: border-box;
           position: relative;
           float: left;
           width: 200px;
           height: 212.7px;
           left: -20px;
           /* background-color: rgb(255, 219, 219); */
       }
       .allprice{
           box-sizing: border-box;
           position: relative;
           float: left;
           width: 180px;
           height: 212.7px;
           left: -20px;
           /* background-color: rgb(212, 196, 196); */
       }
       .del-1{
           box-sizing: border-box;
           position: relative;
           float: left;
           width: 107.40px;
           height: 212.7px;
           left: -15px;
           /* background-color: rgb(255, 219, 219); */
       }
       .del-2{
           box-sizing: border-box;
           position: relative;
           float: left;
           width: 107.40px;
           height: 212.7px;
           left: -15px;
           /* background-color: rgb(255, 219, 219); */
       }
       .del-3{
           box-sizing: border-box;
           position: relative;
           float: left;
           width: 107.40px;
           height: 212.7px;
           left: -15px;
           /* background-color: rgb(255, 219, 219); */
       }
       .del-4{
           box-sizing: border-box;
           position: relative;
           float: left;
           width: 107.40px;
           height: 212.7px;
           left: -15px;
           /* background-color: rgb(255, 219, 219); */
       }
       .check{
           position: absolute;
           left: 37px;
           top: 30px;
           box-sizing: border-box;
           width: 25px;
           height: 25px;
           cursor: pointer;
           /* -webkit-border-radius:10px;
           -moz-border-radius:10px; */
       }
       .gaodaimg-1{
           position: absolute;
           top: 15px;
           left: 3px;
           width: 180px;
           height: 180px;
           border: 1px solid rgb(91, 91, 91);
           cursor: pointer;
       }
       .gaodaimg-2{
           position: absolute;
           top: 15px;
           left: 3px;
           width: 180px;
           height: 180px;
           border: 1px solid rgb(91, 91, 91);
           cursor: pointer;
       }
       .gaodaimg-3{
           position: absolute;
           top: 15px;
           left: 3px;
           width: 180px;
           height: 180px;
           border: 1px solid rgb(91, 91, 91);
           cursor: pointer;
       }
       .gaodaimg-4{
           position: absolute;
           top: 15px;
           left: 3px;
           width: 180px;
           height: 180px;
           border: 1px solid rgb(91, 91, 91);
           cursor: pointer;
       }
       .manjian-1{
        float: left;
           margin-top: 8px;
           margin-left: 10px;
           width: 80px;
           height: 25px;
          background-color: rgb(227, 0, 0);
          color: #fff;
          font-size: 7px;
          font-weight: bold;
          text-shadow: none;
          text-align: center;
          line-height: 25px;
          -webkit-border-radius:10px;
           -moz-border-radius:10px;
           margin-right: 10px;
       }
       .manjian-2{
        float: left;
           margin-top: 8px;
           margin-left: 10px;
           width: 80px;
           height: 25px;
          background-color: rgb(227, 0, 0);
          color: #fff;
          font-size: 7px;
          font-weight: bold;
          text-shadow: none;
          text-align: center;
          line-height: 25px;
          -webkit-border-radius:10px;
           -moz-border-radius:10px;
           margin-right: 10px;
       }
       .manjian-3{
        float: left;
           margin-top: 8px;
           margin-left: 10px;
           width: 80px;
           height: 25px;
          background-color: rgb(227, 0, 0);
          color: #fff;
          font-size: 7px;
          font-weight: bold;
          text-shadow: none;
          text-align: center;
          line-height: 25px;
          -webkit-border-radius:10px;
           -moz-border-radius:10px;
           margin-right: 10px;
       }
       .manjian-4{
        float: left;
           margin-top: 8px;
           margin-left: 10px;
           width: 80px;
           height: 25px;
          background-color: rgb(227, 0, 0);
          color: #fff;
          font-size: 7px;
          font-weight: bold;
          text-shadow: none;
          text-align: center;
          line-height: 25px;
          -webkit-border-radius:10px;
           -moz-border-radius:10px;
           margin-right: 10px;
       }
       .brand{
           float: left;
           margin-top: 8px;
           width: 80px;
           height: 25px;
           background-color: rgb(0, 0, 0);
           color: rgb(255, 249, 208);
           font-size: 7px;
           font-weight: bold;
           text-shadow: none;
           text-align: center;
           line-height: 25px;
           -webkit-border-radius:10px;
           -moz-border-radius:10px;
           margin-right: 15px;
       }
/* 按钮 */
       .number-box{
           box-sizing: border-box;
           position: absolute;
           top: 45px;
           left: -27px;
           width: 175px;
           height: 50px;
           border: 1px solid black;
       }
       .number-box .number-left{
           float: left;
           box-sizing: border-box;
           width: 54px;
           height: 48px;
           border-right: 1px solid black;
           background-color: #fff;
           text-align: center;
           line-height: 50px;
           font-size: 30px;
           font-weight: bold;
           cursor: pointer;
       }
       .number-box .number-left:hover{
        background-color: rgb(220, 220, 220);
       }
       .number-box .number-center{
           float: left;
           box-sizing: border-box;
           width: 64px;
           height: 48px;
           background-color: #fff;
           text-align: center;
           line-height: 50px;
           font-size: 25px;
           font-weight: bold;
       }
       .number-box .number-right{
           float: left;
           box-sizing: border-box;
           width: 54px;
           height: 48px;
           border-left: 1px solid black;
           background-color: #fff;
           text-align: center;
           line-height: 50px;
           font-size: 30px;
           font-weight: bold;
           cursor: pointer;
       }
       .number-box .number-right:hover{
            background-color: rgb(220, 220, 220);
       }
 
/* 一的合计 */
       .allprice-box{
           position: absolute;
           top: 50px;
           left: -8px;
           width: 164px;
           height: 60px;
       }
       .allprice .heji1{
           float: left;
           width: 50px;
           height: 40px;
           font-size: 18px;
           font-weight: bold;
           line-height: 40px;
       }
       .allprice .biaozhi1{
        float: left;
        width: 25px;
        height: 60px;
        /* background-color: rgb(255, 106, 106); */
        font-size: 28px;
        font-weight: bold;
        color: rgb(234, 0, 0);
       }
       .allprice .num{
        float: left;
        width: 89px;
        height: 60px;
        /* background-color: rgb(255, 173, 173); */
        font-size: 28px;
        font-weight: bold;
        color: rgb(234, 0, 0);
       }
/* 二的合计 */
       .allprice-box{
           position: absolute;
           top: 50px;
           left: -8px;
           width: 164px;
           height: 60px;
       }
       .allprice .heji2{
           float: left;
           width: 50px;
           height: 40px;
           font-size: 18px;
           font-weight: bold;
           line-height: 40px;
       }
       .allprice .biaozhi2{
        float: left;
        width: 25px;
        height: 60px;
        /* background-color: rgb(255, 106, 106); */
        font-size: 28px;
        font-weight: bold;
        color: rgb(234, 0, 0);
       }
       .allprice .num{
        float: left;
        width: 89px;
        height: 60px;
        /* background-color: rgb(255, 173, 173); */
        font-size: 28px;
        font-weight: bold;
        color: rgb(234, 0, 0);
       }
/* 三的合计 */
      .allprice-box{
           position: absolute;
           top: 50px;
           left: -8px;
           width: 164px;
           height: 60px;
       }
       .allprice .heji3{
           float: left;
           width: 50px;
           height: 40px;
           font-size: 18px;
           font-weight: bold;
           line-height: 40px;
       }
       .allprice .biaozhi3{
        float: left;
        width: 25px;
        height: 60px;
        /* background-color: rgb(255, 106, 106); */
        font-size: 28px;
        font-weight: bold;
        color: rgb(234, 0, 0);
       }
       .allprice .num{
        float: left;
        width: 89px;
        height: 60px;
        /* background-color: rgb(255, 173, 173); */
        font-size: 28px;
        font-weight: bold;
        color: rgb(234, 0, 0);
       }       
/* 四的合计 */
      .allprice-box{
           position: absolute;
           top: 50px;
           left: -8px;
           width: 164px;
           height: 60px;
       }
       .allprice .heji4{
           float: left;
           width: 50px;
           height: 40px;
           font-size: 18px;
           font-weight: bold;
           line-height: 40px;
       }
       .allprice .biaozhi4{
        float: left;
        width: 25px;
        height: 60px;
        /* background-color: rgb(255, 106, 106); */
        font-size: 28px;
        font-weight: bold;
        color: rgb(234, 0, 0);
       }
       .allprice .num{
        float: left;
        width: 89px;
        height: 60px;
        /* background-color: rgb(255, 173, 173); */
        font-size: 28px;
        font-weight: bold;
        color: rgb(234, 0, 0);
       }       
/* 删除按钮 */
       .delbtn{
           position: absolute;
           top: 50px;
           left: -15px;
           width: 90px;
           height: 40px;
           background-color: rgb(255, 164, 59);
           border: 1px solid grey;
           -webkit-border-radius:10px;
           -moz-border-radius:10px;
           font-size: 15px;
           font-weight: bold;
           color: #fff;
           text-shadow: 2px 2px 2px rgb(80, 80, 80);
           cursor: pointer;
       }
       .delbtn:hover{
           background-color: rgb(255, 206, 137);
           color: rgb(90, 90, 90);
           text-shadow: none;
       }
       .qxbox{
           position: relative;
           box-sizing: border-box;
           float: left;
           width: 240px;
           height: 90px;
           /* background-color: rgb(255, 194, 194); */
       }
       .qx{
         box-sizing: border-box;
         position: absolute;
         top: 35px;
         left: 40px;
         width: 25px;
         height: 25px;
         cursor: pointer;
       }
       .myt{
         box-sizing: border-box;
         position: absolute;
         top: 35px;
         left: 75px;
         width: 150px;
         height: 25px;
        font-size: 18px;
        font-weight: bold;
        color: rgb(87, 87, 87);
       }
       .clear{
           box-sizing: border-box;
           position: relative;
           float: left;
           width: 320px;
           height: 90px;
           /* background-color: rgb(255, 86, 86); */
           margin-right: 50px;
           
       }
       .price-box{
           position: relative;
           box-sizing: border-box;
           float: left;
           width: 370px;
           height: 90px;
           /* background-color: rgb(255, 86, 86); */
       }
       .jiesuan-box{
           box-sizing: border-box;
           position: relative;
           float: left;
           width: 300px;
           height: 90px;
           /* background-color: rgb(255, 184, 184); */
       }
       .btn-clear{
           position: absolute;
           top: 16px;
            width: 250px;
            height: 60px;
            -webkit-border-radius:10px;
            -moz-border-radius:10px;
            font-size: 20px;
            font-weight: bold;
            color: rgb(63, 63, 63);
            border: 1.3px solid rgb(42, 42, 42);
            background-color: rgb(243, 243, 243);
            cursor: pointer;
       }
       .btn-clear:hover{
           background-color: rgb(182, 182, 182);
           color: #fff;
           text-shadow: 2px 2px 2px rgb(108, 108, 108);
       }
       .price-box p{
           position: absolute;
           top: 27px;
           left: 20px;
           font-size: 25px;
           font-weight: bold;
       }
       .price-box .price-a{
           position: absolute;
           top: 19px;
           left: 130px;
           font-size: 35px;
           color: rgb(206, 31, 31);
           font-weight: bold;
       }
       .jiesuan{
           box-sizing: border-box;
           position: absolute;
           top: 10px;
           left: 10px;
           width: 200px;
           height: 70px;
           background-color: rgb(204, 0, 0);
           color: #fff;
           font-size: 30px;
           font-weight: bold;
           -webkit-border-radius:10px;
            -moz-border-radius:10px;
            cursor: pointer;
       }
       .jiesuan:hover{
           background-color: rgb(255, 82, 82);
           color: rgb(63, 63, 63);
       }
/* 购物车弹窗 */
       .alert-window{
           display: none;
           z-index: 11;
           box-sizing: border-box;
           position: fixed;
           top: 200px;
           left: 470px;
           width: 500px;
           height: 350px;
           border: 1.4px solid black;
           border-top: 40px solid rgb(70, 172, 255);
           background-color: rgb(255, 255, 255);
       }
       .alert-img{
           margin-top: 30px;
           margin-left: 200px;
           width: 90px;
           height: 90px;
       }
       .alert-text{
           position: absolute;
           box-sizing: border-box;
           text-align: center;
           line-height: 80px;
           width: 497.2px;
           height: 100px;
           /* background-color: rgb(255, 128, 128); */
           font-size: 23px;
           font-weight: bold;
           color: rgb(53, 53, 53);
          
        }
        .no{
            position: absolute;
            left: 60px;
            bottom: 40px;
            width: 130px;
            height: 60px;
            -webkit-border-radius:10px;
           -moz-border-radius:10px;
           border: 1.3px solid black;
           color: rgb(255, 255, 255);
           font-size: 23px;
           font-weight: bold;
           background-color: rgb(225, 0, 0);
        }
        .no:hover{
            color: rgb(81, 81, 81);
            background-color: rgb(255, 149, 149);
        }
        .yes{
            position: absolute;
            right: 60px;
            bottom: 40px;
            width: 130px;
            height: 60px;
            -webkit-border-radius:10px;
           -moz-border-radius:10px;
           border: 1.3px solid black;
           color: rgb(255, 255, 255);
           font-size: 23px;
           font-weight: bold;
           background-color: rgb(34, 185, 0);
        }
        .yes:hover{
            color: rgb(81, 81, 81);
            background-color: rgb(152, 255, 150);
        }
/* 空购物车弹窗 */
        .null-alert-window{
           display: none;
           z-index: 11;
           box-sizing: border-box;
           position: fixed;
           top: 200px;
           left: 470px;
           width: 500px;
           height: 350px;
           border: 1.4px solid black;
           border-top: 40px solid rgb(70, 172, 255);
           background-color: rgb(255, 255, 255);
       }
       .null-alert-img{
           margin-top: 30px;
           margin-left: 200px;
           width: 90px;
           height: 90px;
       }
       .null-alert-text{
           position: absolute;
           box-sizing: border-box;
           text-align: center;
           line-height: 80px;
           width: 497.2px;
           height: 100px;
           /* background-color: rgb(255, 128, 128); */
           font-size: 23px;
           font-weight: bold;
           color: rgb(53, 53, 53);
          
        }
        .null-re{
            position: absolute;
            left: 96px;
            bottom: 40px;
            width: 300px;
            height: 70px;
            -webkit-border-radius:20px;
           -moz-border-radius:20px;
           border: 1.3px solid black;
           color: rgb(255, 255, 255);
           font-size: 26px;
           font-weight: bold;
           background-color: rgb(255, 140, 0);
        }
        .null-re:hover{
            color: rgb(60, 60, 60);
            background-color: rgb(255, 172, 100);
        }
/* 空购物车背景 */
        .nullbg-img{
            display: none;
             position: absolute;
             top: 250px;
             left: 620px;
             box-sizing: border-box;
             width: 250px;
             height: 250px;
        }
        .nullbg-text{
            display: none;
            position: absolute;
            top: 495px;
            left: 580px;
            box-sizing: border-box;
            font-size: 40px;
            font-weight: bold;
            color: rgb(255, 144, 24);
        }
    </style>
    <script src="./jquery.js"></script>
    <script src="./main.js"></script>
</head>
<body>
<div class="left">
    <img src="./photo/个性.png" alt="" class="left-img">
    <ul>
        <li>回到首页</li>
        <li>我的收藏</li>
        <li>历史记录</li>
        <li>退出登录</li>
    </ul>
</div>
<div class="right">
    <div class="banner">
        <img src="./photo/购物车.png" alt="">
        <p>您的购物车</p>
        <div class="search-box">
            <input type="text" class="search" placeholder="请输入您要查找的商品">
            <img src="./photo/搜索.png" alt="" class="search-img">
        </div>
    </div>
    <div class="main">
   <div class="object">
       <div class="xz-1">
            <input type="checkbox" class="check">
       </div>
       <div class="img-1">
           <img src="./photo/gaoda1.jpg" alt="GP-01 玉兰高达" title="GP-01 玉兰高达" class="gaodaimg-1">
       </div>
       <div class="information-1">【万代】高达拼装 MG 1/100 GP-01 玉兰高达 拼装模型<br>
               <div class="manjian-1">1000减200</div>
               <div class="brand">品&nbsp;&nbsp;牌</div>
       </div>
       <div class="price">
              <span>
                  ￥243
              </span><br>
              <div>￥202</div>
              
       </div>
       <div class="number-1">
           <div class="number-box">
               <div class='number-left'>-</div>
               <div class="number-center">1</div>
               <div class="number-right">+</div>
           </div>
       </div>
       <div class="allprice">
           <div class="allprice-box">
               <div class="heji1">合计:</div>
               <div class="biaozhi1">￥</div>
               <div class="num">202</div>
            </div>
       </div>
       <div class="del-1">
            <button class="delbtn">删除物品</button>
       </div>
   </div>
   <div class="object">
       <div class="xz-2">
           <input type="checkbox" class="check">
       </div>
       <div class="img-2">
           <img src="./photo/gaoda2.jpg" alt="VER-KA 海牛高达" title="VER-KA 海牛高达" class="gaodaimg-2">
       </div>
       <div class="information-2">【万代】高达拼装 MG 1/100 VER-KA 海牛高达 拼装模型<br>
            <div class="manjian-2">1000减200</div>
            <div class="brand">品&nbsp;&nbsp;牌</div>
       </div>
       <div class="price">
           <span>
              ￥575
           </span><br>
          <div>￥545</div>
        </div>
       <div class="number-2">
           <div class="number-box">
                <div class='number-left'>-</div>
                <div class="number-center">1</div>
                <div class="number-right">+</div>
           </div>
       </div>
       <div class="allprice">
           <div class="allprice-box">
               <div class="heji2">合计:</div>
               <div class="biaozhi2">￥</div>
               <div class="num">545</div>
            </div>
       </div>
       <div class="del-2">
           <button class="delbtn">删除物品</button>
       </div>
   </div>
   <div class="object">
       <div class="xz-3">
             <input type="checkbox" class="check">
       </div>
       <div class="img-3">
            <img src="./photo/gaoda3.jpg" alt="EW-WING 飞翼高达" title="EW-WING 飞翼高达" class="gaodaimg-3">
       </div>
       <div class="information-3">【万代】高达拼装 MG 1/100 EW-WING 飞翼高达 拼装模型<br>
             <div class="manjian-3">1000减200</div>
             <div class="brand">品&nbsp;&nbsp;牌</div>
       </div>
       <div class="price">
           <span>
              ￥305
           </span><br>
           <div>￥275</div>
        </div>
       <div class="number-3">
           <div class="number-box">
               <div class='number-left'>-</div>
               <div class="number-center">1</div>
               <div class="number-right">+</div>
           </div>
       </div>
       <div class="allprice">
          <div class="allprice-box">
              <div class="heji3">合计:</div>
              <div class="biaozhi3">￥</div>
              <div class="num">275</div>
           </div>
       </div>
       <div class="del-3">
           <button class="delbtn">删除物品</button>
       </div>
   </div>
   <div class="object">
    <div class="xz-4">
        <input type="checkbox" class="check">
    </div>
    <div class="img-4">
        <img src="./photo/gaoda4.jpg" alt="VER-KA 海牛高达" title="VER-KA 海牛高达" class="gaodaimg-4">
    </div>
    <div class="information-4">【万代】高达拼装 MG 1/100 STRIKE 自由高达 拼装模型<br>
         <div class="manjian-4">1000减200</div>
         <div class="brand">品&nbsp;&nbsp;牌</div>
    </div>
    <div class="price">
        <span>
           ￥399
        </span><br>
        <div>￥309</div>
     </div>
    <div class="number-4">
        <div class="number-box">
             <div class='number-left'>-</div>
             <div class="number-center">1</div>
             <div class="number-right">+</div>
        </div>
    </div>
    <div class="allprice">
        <div class="allprice-box">
            <div class="heji4">合计:</div>
            <div class="biaozhi4">￥</div>
            <div class="num">309</div>
         </div>
    </div>
    <div class="del-4">
        <button class="delbtn">删除物品</button>
    </div>
   </div>
   </div>
   <!-- buy -->
   <div class="buybox">
       <div class="qxbox">
           <input type="checkbox" class="qx">
           <div class="myt">选中全部宝贝</div>
       </div>
       <div class="clear">
           <button class="btn-clear">清空所有宝贝</button>
       </div>
       <div class="price-box">
           <p>共合计:￥</p>
           <div class="price-a">0</div>
       </div>
       <div class="jiesuan-box">
           <button class="jiesuan">结&nbsp;&nbsp;算</button>
       </div>
   </div>
</div>
<!-- 遮盖层 -->
<div class='mask'></div>
<!-- 全删弹窗 -->
<div class="alert-window">
    <img src="./photo/等待确认 (1).png" alt="" class="alert-img">
    <div class="alert-text">您确认删除所有宝贝吗？</div>
    <button class="no">返 回</button>
    <button class="yes">确 认</button>
</div>
<!-- 空购物车弹窗 -->
<div class="null-alert-window">
    <img src="./photo/空空的.png" alt="" class="null-alert-img">
    <div class="null-alert-text">您的购物车是空的，没有宝贝！</div>
    <button class="null-re">返 回</button>
</div>
<!-- 空购物车背景 -->
    <img src="./photo/包裹-空的.png" alt="" class="nullbg-img">
    <div class="nullbg-text">您的购物车无宝贝！</div>
</body>
</html>复制

4.2 jQuery + Java Script 文件：

// var delbtn1=document.querySelector('.del1btn1');
// var delbtn2=document.querySelector('.del1btn2');
// var delbtn3=document.querySelector('.del1btn3');
// var delbtn4=document.querySelector('.del1btn4');
 
//jquery 实现全选单选商品切换
$(function(){
    $('.qx').change(function(){
        // 测试 点击全选输出true/false console.log($(this).prop('checked'));
        $('.check').prop('checked',$(this).prop('checked'));
        
            allprice();
    })
    $('.check').change(function(){
        if($(this).prop('checked')==true){
           allprice()
        }else if($(this).prop('checked')==false){
           allprice()
        }
        else if($('.check:checked').length==$('.check').length){
            $('.qx').prop('checked',true);
        }else{
            $('.qx').prop('checked',false);
        }
    })
//add 变化,text()获取来的是string类型，自增会隐式转换
    $('.number-right').click(function(){
       var num=$(this).siblings('.number-center').text();
       num++;
       $(this).siblings('.number-center').text(num)
       //得到点击加号的物品的价格--->'￥xxx'
       var a=$(this).parent().parent().siblings('.price').children('div').text();
       console.log(a.length);
       //去掉￥符号
       var single_price=parseInt(a.substr(1,a.length-1))
       //赋值
       $(this).parent().parent().siblings('.allprice').find('.num').text(single_price*num)
       allprice()
    })
    $('.number-left').click(function(){
        if($(this).siblings('.number-center').text()=='1'){
            $(this).siblings('.number-center').text('1');
            $(this).parent().parent().siblings('.allprice').find('.num').text($(this).parent().parent().siblings('.price').children('div').text().substr(1,a.length-1))
        }else{
            var num=$(this).siblings('.number-center').text();
            num--;
            $(this).siblings('.number-center').text(num)
            //得到点击加号的物品的价格--->'￥xxx'，注意此处可以使用parents()来代替parent().parent()
            var a=$(this).parent().parent().siblings('.price').children('div').text();
            //去掉￥符号
            var single_price=parseInt(a.substr(1,a.length-1))
            //赋值
            $(this).parent().parent().siblings('.allprice').find('.num').text(single_price*num)
            allprice()
        }
     })
})
//总价函数
function allprice(){
    var sum=0;
    var price1=parseInt($('.heji1').siblings('.num').text())
    var price2=parseInt($('.heji2').siblings('.num').text())
    var price3=parseInt($('.heji3').siblings('.num').text())
    var price4=parseInt($('.heji4').siblings('.num').text())
    if($('.xz-1').children('.check').prop('checked')==true){
        var sum1=price1
    }else{
        sum1=0
    }
    if($('.xz-2').children('.check').prop('checked')==true){
        var sum2=price2
    }else{
        sum2=0
    }
    if($('.xz-3').children('.check').prop('checked')==true){
        var sum3=price3
    }else{
        sum3=0
    }
    if($('.xz-4').children('.check').prop('checked')==true){
        var sum4=price4
    }else{
        sum4=0
    }
    sum=sum1+sum2+sum3+sum4
    console.log(sum);
    $('.price-a').text(sum);
}
 
document.addEventListener('DOMContentLoaded',function(){
    var delbtn=document.querySelectorAll('.delbtn');
    var objects=document.querySelectorAll('.object');
    var main=document.querySelector('.main');
    var clearbtn=document.querySelector('.btn-clear');
    var searchbtn=document.querySelector('.search-img');
    var mask=document.querySelector('.mask');
    var alert=document.querySelector('.alert-window');
    var yes=document.querySelector('.yes');
    var no=document.querySelector('.no');
    var nullalert=document.querySelector('.null-alert-window');
    var nullbtn=document.querySelector('.null-re');
    var nullbgimg=document.querySelector('.nullbg-img');
    var nullbgtext=document.querySelector('.nullbg-text');
    var qx=document.querySelector('.qx');
    qx.addEventListener('click',function(){
        if(main.children.length==0){
            qx.checked=false;
            nullalert.style.display='block';
            mask.style.display='block'
            nullbtn.addEventListener('click',function(){
                nullalert.style.display='none';
                mask.style.display='none'
                nullbgimg.style.display='block'
                nullbgtext.style.display='block'
        })
    }
})
    
    // del
    for(var i=0;i<delbtn.length;i++){
       delbtn[i].addEventListener('click',function(){
        // 测试用的   
        // console.log(objects.length);
        // console.log(main.children.length);
           main.removeChild(this.parentNode.parentNode)
           allprice()
           if(main.children.length==0){
               nullbgimg.style.display='block'
               nullbgtext.style.display='block'
               qx.checked=false;
           }
       })
    }
// prevent
    document.addEventListener('contextmenu',function(e){
        e.preventDefault();
    })
    document.addEventListener('selectstart',function(e){
        e.preventDefault();
    })
// clear
    clearbtn.addEventListener('click',function(){
        if(main.children.length==0){
            nullalert.style.display='block';
            mask.style.display='block'
            nullbtn.addEventListener('click',function(){
                nullalert.style.display='none';
                mask.style.display='none'
                nullbgimg.style.display='block'
                nullbgtext.style.display='block'
            })
        }else{
            alert.style.display='block';
            mask.style.display='block'
            yes.addEventListener('click',function(){
                 alert.style.display='none';
                 mask.style.display='none';
                 for(var i=0;i<objects.length;i++){
                     main.removeChild(main.children[0])
                 }
                 allprice()
                 qx.checked=false
                 nullbgimg.style.display='block'
                 nullbgtext.style.display='block'
             })
             no.addEventListener('click',function(){
                 alert.style.display='none';
                 mask.style.display='none';
             })
         }
    })
//search-btn
    searchbtn.addEventListener('mouseenter',function(){
        this.src='./photo/搜索 (1).png'
    })
    searchbtn.addEventListener('mouseleave',function(){
        this.src='./photo/搜索.png'
    })
})复制

🔊 创作不易，给个关注再走吧！