jquery模拟淘宝购物车

Posted 2020-07-15

今天要实现的一个功能页面就是利用jquery代码模拟一个淘宝网的购物车结算页面

总体页面效果如图：

 

首先我们要实现的内容的需求有如下几点：

1.在购物车页面中，当选中“全选”复选框时，所有商品前的复选框被选中，否则所有商品的复选框取消选中。

2.当所有商品前的复选框选中时，“全选”复选框被选中，否则“全选”复选框取消选中。

3.单击图标-的时候数量减一而且不能让物品小于0并且商品总价与积分随之改变。

4.单击图标+的时候数量增加并且商品总价与积分随之改变。

5.单击删除所选将删除用户选中商品，单击删除则删除该商品即可并达到商品总价与积分随之改变。

下面我们就开始进入代码

 <script type="text/javascript">
 //01.定义一个方法让它自动计算每行商品的小计，商品总价和可获积分
   function productCount() {
       var Total_price= 0;//定义一个变量保存总价格
       var integral = 0;//定义一个变量保存总积分
       $("tr[id]").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);
           //计算总价
           Total_price+= price;
           //计算积分
           integral += $(dom).children(".cart_td_4").text() * num;
       });
       //定位到总价对象给文本赋值
       $("#total").text(Total_price);
       //定位到可获积分对象给文本赋值
       $("#integral").text(integral);
   }
    $(function () {
        //调用上面我们定义好的用来自动计算商品金额的函数productCount()
        productCount();
        //02接下来实现全选的功能
        //02.1定位到全选按钮注册单击事件
        $("#allCheckBox").click(function () {
            $("input[name=cartCheckBox]").attr("checked", this.checked);
        });
        //02.2给所有子复选框绑定click事件
        $("input[name=cartCheckBox]").bind("click", function () {
            //定义临时变量
            var $check = $("input[name=cartCheckBox]");
            $("#allCheckBox").attr("checked",$check.length==$check.filter(":checked").length);
        });
        //03实现商品数量的增加和减少功能
        $(".hand").bind("click", function () {
            var count = $(this).prev().val();
            $(this).prev().val(++count);
            productCount();
        });
        $(".hand").bind("click", function () {
            var count = $(this).next().val();
            var result = count--;
            if (result <= 1) {
                alert("宝贝数量不可以小于0")
                count = 1;
            }
            $(this).next().val(count);
            productCount();
        });
        //04实现删除商品的功能
        //04.1单击删除所选删除商品
        $("#deleteAll").bind("click", function () {
            $("input[name=cartCheckBox]:checked").each(function () {

//04.1单击删除所选删除商品的，以下代码中删除前一个tr的代码不可以去下一句调换位置，否则将找不到所删除的tr
                $(this).parents("tr").prev().remove();//删除前一个tr;
                $(this).parents("tr").remove();//删除当前行
                productCount();
            });
        });
        //04.2删除单个商品
        $(".cart_td_8").find("a").click(function () {
            $(this).parent().parent().prev().remove();//删除前一个tr
            $(this).parent().parent().remove();//删除当前行
            productCount();

        });
    });
 </script>

好了以下就是jquery实现购物车的代码，如果需要网页HTML素材及代码请关注本人新浪微博李晓鹏0204私信本人，或者在以下评论告诉我