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私信本人，或者在以下評論告訴我