Jquery淘宝购物车案例以及实现方法

Jquerty代码

<script>
    $(a[id!=deleteAll]).click(function () {
          
   //点击a标签不等于iddeleteAll得
        $(this).parent().parent().prev().remove() //通过点击当前得删除 找到要删除得上一级标题

        $(this).parent().parent().remove()//通过点击当前得删除 删除自己
        f()
    })
    $("#allCheckBox").click(function () {
          
   
        var a = $(input[id=allCheckBox]).is(:checked) //判断点击得allCheckBox全选按钮是不是被选中

        if (a) {
          
   
            $(input[name=cartCheckBox]).prop("checked", true) //如果被选择就所有得复选框都被选择


        } else {
          
   
            $(input[name=cartCheckBox]).prop("checked", false)
        }

    })
    var array = [];
    $(#deleteAll).click(function () {
          
     //点击删除所选得物品
        if ($(input[id=allCheckBox]).is(:checked)) {
          
    //判断是否选择
            var tr = $(tr);   //获取所有得tr标签 也就是整个购物车

            for (let i = 1; i < tr.length - 1; i++) {
          
   //不取头不取尾，其他全部删除
                tr.eq(i).remove();
            }
            f() //删除后调用计算金额得方法
        } else {
          
   
            var cart = $(input[name*=cartCheckBox])
            for (var i = 0; i < cart.length; i++) {
          
   
                if (cart.eq(i).is(:checked)) {
          
    //如果为true得就 获取所有得复选框的value 为当前物品得父级用他得删除他得上一级标题和自己
                    $(# + cart.eq(i).val()).prev().remove()

                    $(# + cart.eq(i).val()).remove()
                }
            }
            f(); //删除后调用计算金额得方法
        }
    })
    $(img[alt=add]).click(function () {
          
   //点击+物品就加
        var a = $(this).prev().val()
        a++;
        $(this).prev().val(a)

        var jiage = $(this).parent().prev().html()
        var sl = $(this).prev().val()


        $(this).parent().next().html(jiage * sl)
        f()
    })
    $(img[alt=minus]).click(function () {
          
   
        //点击-物品就-
        var a = $(this).next().val()
        if (a <= 0) {
          
   
            alert("不能小于0")
            throw  SyntaxError
        }
        a--;
        $(this).next().val(a)

        var jiage = $(this).parent().prev().html()
        var sl = $(this).next().val()


        $(this).parent().next().html(jiage * sl)
        f()
    })
    window.ondrag = f() //网页加载时

    function f() {
          
   
        var jf = 0;
        var jf1 = 0;
        var jf2 = 0;
        var jf3 = 0;
        //计算所有页面得金额等
        var mun = 0;
        var pr1 = $(tr[id=product1]).children().eq(4).html();
        var pr2 = $(tr[id=product2]).children().eq(4).html();
        var pr3 = $(tr[id=product3]).children().eq(4).html();
        var pr4 = $(tr[id=product4]).children().eq(4).html();


        var num1 = $(#num_1).val()
        var num2 = $(#num_2).val()
        var num3 = $(#num_3).val()
        var num4 = $(#num_4).val()
        var jiag1 = pr1 * num1;
        var jiag2 = pr2 * num2;
        var jiag3 = pr3 * num3;
        var jiag4 = pr4 * num4;

        $(tr[id=product1]).children().eq(6).html(jiag1);
        $(tr[id=product2]).children().eq(6).html(jiag2);
        $(tr[id=product3]).children().eq(6).html(jiag3);
        $(tr[id=product4]).children().eq(6).html(jiag4);
        var ca = $(".cart_td_7"); //用for循环找所有得小计 去算总价格 解决了删除了出错得问题
        var jg = 0;
        var ff = 0;
        var sl = $(.num_input);
        var jifen = $(.cart_td_4)
        for (let i = 0; i < ca.length; i++) {
          
   
            jg += parseInt(ca.eq(i).html())
            ff += sl.eq(i).val() * jifen.eq(i).html();
        }
        $(#integral).html(ff)
        $(#total).html(jg)

    }


    $(input[name=cartCheckBox]).click(function () {
          
   
//单点4个 全选自动选中
        $(input[id=allCheckBox]).prop("checked", $(input[name=cartCheckBox]).length === $(input[name=cartCheckBox]:checked).length)
    })


</script>