純jquery實現(xiàn)模仿淘寶購物車結算
更新時間:2015年08月20日 15:29:20 投稿:mrr
在淘寶購物,需要把商品加入購車,其中包含全選、單選金額改變,當增加商品時金額也會相應的發(fā)生變化,下面通過本文給大家分享純jquery實現(xiàn)模仿淘寶購物車結算,需要的朋友可以參考下
這篇文章里,將會提到購物車里的所有功能。包括全選、單選金額改變。在增加數(shù)量時金額也會相應改變。
效果圖展示:

說下大致的思路吧:
1、首先是計算一行的價格。這個功能在上篇博客里有提到,這里就不列舉出來了。
2、遍歷選中的幾行,將每行的數(shù)值相加。
3、將值賦給總金額顯示出來。當取消勾選或加減數(shù)量時,金額會相應改變。
下面是具體的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();//獲取一行的商品數(shù)量
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);//將計算出的總數(shù)量顯示
}
//全選
$(".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");
}
})//根據(jù)數(shù)量是否為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 );//數(shù)量加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 );//數(shù)量減1
num = input.attr("value");
price = num*per;//
obj.siblings(".d5").find(".cart-price").text(price);
count();
})
})
</script>
jquery模仿淘寶懸掛購物車物品結算功能-附源碼下載

相關文章
解決qrcode.js生成二維碼時必須定義一個空div的問題
這篇文章主要介紹了解決qrcode.js生成二維碼時必須定義一個空div的問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
jquery實現(xiàn)的代替?zhèn)鹘y(tǒng)checkbox樣式插件
這篇文章主要介紹了jquery實現(xiàn)的代替?zhèn)鹘y(tǒng)checkbox樣式插件,可實現(xiàn)滑動選擇的效果,需要的朋友可以參考下2015-06-06

