2022.6.27日志

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

<td class="num-box">
      <input class="jian" type="button" value="减" /><input class="num" type="text" value="1"/>              <input class="add" type="button" value="加" />
 </td>

.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的父标签的父标签的删除事件

 

  <td style="color: darkgrey;">
         <a href="#" class="delbtn">删除</a>
   </td>    

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

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

   <td class="tu1">
       <a href="#" class="active"></a>
   </td>

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.实现商品选中状态样式切换。 ​

function changeSelect(thisObj){
					toggleClass(thisObj,"active");
				}