纯jQuery实现模仿淘宝购物车结算
效果图显示:
让我们说一般的想法。
1,第一个是计算一行的价格,这个函数在上一篇博客中提到过,这里没有列举。
2。遍历选定的行并添加每行的值。
三.当金额被取消或增加时,金额将相应地发生变化。
以下是JS的具体部分:
$(函数(){())
计算总金额
功能totalmoney(){
无功total_price = 0;
无功total_count = 0;
$(D1输入)。每个(函数(){)
如果($(this)。HasClass('status ')){
var obj1 = $(这)。父母(兄弟姐妹)(。D4 ),(计数)(。Val); / /获得货物的数量
total_count = parseInt(obj1);
var obj2 = $(这)。父母(兄弟姐妹)(。D5 ),(。车价格)(文本); / /得到一排
total_price = parseInt(obj2);
}
});
$(项目)。文本(total_count); / /总金额将计算和显示
$(总),文本(total_price); / /总数将计算和显示
}
选择
$(。D输入)。Toggle(function(){)
$(这)。AddClass(状态);
$(。SC中的列表。D1输入)。AddClass(状态); / /添加刻度样式
$(。SC中一览表)。AddClass(问号);
totalmoney();
},
函数(){
$(这)。RemoveClass(状态);
$(。SC中的列表。D1输入)。RemoveClass(状态); / /取消方式
$(。SC中一览表)。RemoveClass(问号);
totalmoney();
});
/广播
$(D1输入)。Toggle(函数(){)
$(这)。AddClass(状态); / /添加刻度样式
$(这)。父母(。SC中一览表)。AddClass(问号);
totalmoney();
},
函数(){
$(这)。RemoveClass(状态); / /取消方式
$(这)。父母(。SC中一览表)。RemoveClass(问号);
totalmoney();
});
否定样式
函数计数(){
$()。每个(函数(){)
var($),瓦迩();
如果(数字= 1){
$(这),兄弟姐妹(减少)。RemoveClass(两)。AddClass();
$(这),兄弟姐妹(减少)Attr(残疾人。
{人}
$(这),兄弟姐妹(减少)。RemoveClass(),AddClass(两);
}
}根据数字为1,减去样式更改。
}
添加
$(中间列表添加)。Click(函数(){)
var输入= $(这个);
var obj = $(this)。父母(。D4 );
VaR(obj.siblings每= parseFloat(。D3 ),(/)(文本) / /);获取当前价格为
变量=;
var价格=;
Input.attr (value
Num = input.attr(价值);
价格=
obj.siblings(。D5 ),(。车价格)文本(价格);
伯爵();
totalmoney();
})
还原
$(中间列表。)。Click(函数(){)
var输入= $(这个);
var obj = $(this)。父母(。D4 );
VaR(obj.siblings每= parseFloat(。D3 ),(/)(文本) / /);获取当前价格为
变量=;
var价格=;
VaR值= parseInt(input.attr(价值));
如果(缬氨酸= 1){
瓦尔= 2;
}
Input.attr(价值
Num = input.attr(价值);
价格=
obj.siblings(。D5 ),(。车价格)文本(价格);
伯爵();
})
})
jQuery仿淘宝悬浮购物车项目结算功能,源码下载
下载下载演示源代码