JQUERY实现购物车

​     一.购物车数量调整及价格计算
  parent()找父标签，prev()找它前面同级标签，next()找它后面的同级标签

                    
 

.num-box input{
    border: 1px solid white;
    height: 40px;
    width: 40px;
    text-align: center;
}

1.减法按钮

  1）设置减法按钮的点击事件

  2）获取文本框里的数字

  3）if判断，当数值大于零时实行减法操作

  4）在if判断中把数量文本框里的数字减1

  5）获取总金额getSum();

 2.加法按钮

  1）设置加法按钮的点击事件

  2）获取文本框里的数字

  3）把数量文本框里的数字加1，把num变成int类型

  4）获取单价（折后）

  5）计算总价

  6）把总价放入指定位置

  7）获取总金额getSum();

 3.计算总金额

  1）遍历获取到的每一个对象

  2）获取单价（折后）

  3）计算总价

  4）把总价放入指定位置

​编辑

二.购物车动态删除商品
1.设置删除a标签的点击事件

2.if判断confirm，找当前this的父标签的父标签的删除事件

   
         删除
       

   $(".delbtn").click(function(){
            if (confirm("确定从购物车中移除该商品?")) {
                $(this).parent().parent().remove();    }
    })  

三.商品选中状态样式切换
1.使用a标签class名为active

   
       
   

2.设置active的点击事件

3.if判断

  $(".active").addClass("addclass");
        $(".active").click(function() {

            if ($(this).hasClass("addclass")) {
                $(this).removeClass("addclass").addClass("removeclass");

            } else {
                $(this).removeClass("removeclass").addClass("addclass");
            }
     });

4.设置CSS样式：

.addclass {
                background-repeat: no-repeat;
                background-image: url("img/ico_checkout.png");
                text-align: center;
                background-size: 30px;
            }

.removeclass {
                background-repeat: no-repeat;
                text-align: center;
                background-size: 30px;
                background-image: url("img/ico_unchecked.png");
            }

 .active {
                display: block;
                width: 50px;
                height: 30px;
                margin-right: -30px;
                margin-left: 20px;
            }

5.实现商品选中状态样式切换。 ​