這篇文章里，將會提到購物車里的所有功能。包括全選、單選金額改變。在增加數量時金額也會相應改變。
效果圖展示：
說下大致的思路吧：
1、首先是計算一行的價格。這個功能在上篇博客里有提到，這里就不列舉出來了。
2、遍歷選中的幾行，將每行的數值相加。
3、將值賦給總金額顯示出來。當取消勾選或加減數量時，金額會相應改變。
下面是具體的js部分：
<script type="text/javascript"> $(function(){ //計算總金額 function totalMoney(){ var total_price = 0; var total_count = 0; $(".d1-input").each(function(){ if($(this).hasClass('status')) { var obj1 = $(this).parent().siblings(".d4").find(".count").val();//獲取一行的商品數量 total_count += parseInt(obj1); var obj2= $(this).parent().siblings(".d5").find(".cart-price").text();//獲取一行的金額 total_price += parseInt(obj2); } }); $(".item").text(total_count);//將計算出的總金額顯示 $(".total").text(total_price);//將計算出的總數量顯示 } //全選 $(".d-input").toggle( function(){ $(this).addClass("status"); $(".sc-mid-list .d1-input").addClass("status");//添加勾選樣式 $(".sc-mid-list").addClass("mouseover"); totalMoney(); }, function(){ $(this).removeClass("status"); $(".sc-mid-list .d1-input").removeClass("status");//取消勾選樣式 $(".sc-mid-list").removeClass("mouseover"); totalMoney(); }); // 單選 $(".d1-input").toggle( function(){ $(this).addClass("status");//添加勾選樣式 $(this).parents(".sc-mid-list").addClass("mouseover"); totalMoney(); }, function(){ $(this).removeClass("status");//取消勾選樣式 $(this).parents(".sc-mid-list").removeClass("mouseover"); totalMoney(); }); // 減號樣式 function count(){ $(".count").each(function(){ var num = $(this).val(); if (num == 1) { $(this).siblings(".reduce").removeClass("two").addClass("one"); $(this).siblings(".reduce").attr("disabled","disabled"); } else { $(this).siblings(".reduce").removeClass("one").addClass("two"); } })//根據數量是否為1，改變減號的樣式 } // 加 $(".sc-mid-list .add").click(function(){ var input = $(this).siblings(".count"); var obj = $(this).parents(".d4"); var per = parseFloat(obj.siblings(".d3").find(".per").text());//獲取當前一行的單價 var num = ''; var price = ''; input.attr("value", parseInt(input.attr("value")) + 1 );//數量加1 num = input.attr("value"); price = num*per;// obj.siblings(".d5").find(".cart-price").text(price); count(); totalMoney(); }) // 減 $(".sc-mid-list .reduce").click(function(){ var input = $(this).siblings(".count"); var obj = $(this).parents(".d4"); var per = parseFloat(obj.siblings(".d3").find(".per").text());//獲取當前一行的單價 var num = ''; var price = ''; var Val = parseInt(input.attr("value")); if(Val <= 1){ Val = 2; } input.attr("value", parseInt(Val) - 1 );//數量減1 num = input.attr("value"); price = num*per;// obj.siblings(".d5").find(".cart-price").text(price); count(); }) })</script>jquery模仿淘寶懸掛購物車物品結算功能-附源碼下載
新聞熱點
疑難解答
