jquery模拟淘宝购物车

时间：2023-03-08 16:11:49

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

总体页面效果如图：

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私信本人，或者在以下评论告诉我

相关文章