JQuery小练习(.js部分)

实现功能:

1、购物车全选与全不选

2、删除选中商品

3、直接删除商品

4、数量和价格修改

5、计算总价

$(function(){
    //全选与全不选
    $("#allCheckBox").click(function (){
        var flag=$(this).is(":checked"); //记录此时全选框的状态
        $("input[name='cartCheckBox']").each(function (){  //遍历所有cartCheckBox复选框
            $(this).prop("checked",flag); //让复选框cartCheckBox的check与全选框保持一致
        });
    });
    //删除选中商品
    $("#deleteAll").click(function (){  //如果点击删除所选按钮,就会删除选中商品
        $("input[name='cartCheckBox']:checked").each(function (){ //遍历选中的复选框
            n=$(this).parents("tr").index();//获取复选框的行的顺序
            $("table#shopping").find("tr:eq("+n+")").remove();
            $("table#shopping").find("tr:eq("+(n-1)+")").remove();//移除该行与上一行(上一行为店铺名称)
        });
        productCount();
    });
    //直接删除商品
    $(".cart_td_8").find("a").click(function (){
        var link=$(this).parents("tr").index();
        $("table#shopping").find("tr:eq("+link+")").remove();
        $("table#shopping").find("tr:eq("+(link-1)+")").remove();
        productCount();
    });
    //数量和价格修改
    $('#shopping').find('.cart_td_6').find('img').filter('[alt="minus"]').click(function (){
       var t=$(this).parent().find(".num_input");
       if (t.val()==""||undefined||null){
           t.val(0);
       }
       t.val(parseInt(t.val())-1);
       if (parseInt(t.val())<0){
           t.val(0);
       }
        productCount();
    });
    $('#shopping').find('.cart_td_6').find('img').filter('[alt="add"]').click(function() {
        var t = $(this).parent().find(".num_input");
        if(t.val()==""||undefined||null){
            t.val(0);
        }
        t.val(parseInt(t.val()) + 1);
        productCount();
    });
    //计算总价
    function productCount(){
        var $tr=$("#shopping").find("tr[id]");
        var summer=0;
        var integral=0;
        $tr.each(function(i,dom){
            var num=$(dom).children(".cart_td_6").find("input").val();//商品数量
            var price=num*$(dom).children(".cart_td_5").text();//商品小计
            $(dom).children(".cart_td_7").html(price);//显示商品小计
            summer+=price;//总价
            integral+=$(dom).children(".cart_td_4").text()*num;//积分
        });
        $("#total").text(summer);
        $("#integral").text(integral);
    }

});

运行结果:

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值