快捷導(dǎo)航

jQuery實(shí)現(xiàn)移動(dòng)端手機(jī)商城購(gòu)物車(chē)功能

更新時(shí)間：2016年09月24日 16:54:25 投稿：mrr

這篇文章主要介紹了jQuery實(shí)現(xiàn)移動(dòng)端手機(jī)商城購(gòu)物車(chē)功能的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

購(gòu)物車(chē)數(shù)量加減

右加號(hào)

$(".jiahao").click(function() {
var t = $(this).siblings().find("input");//取到數(shù)量
t.val(parseInt(t.val()) + 1);//parseInt()解析input一個(gè)字符串，返回一個(gè)整數(shù)
heji();//調(diào)用后面計(jì)算的函數(shù)
})

左減號(hào)

$(".jianhao").click(function() {
var t = $(this).siblings().find("input");
t.val(parseInt(t.val()) - 1);
//當(dāng)數(shù)量小于1的時(shí)候讓最小值等于1
if(parseInt(t.val()) < 1) {
t.val(1)
};
heji();
})

計(jì)算商品總價(jià)

function heji() {
$(".gwcar").each(function() {//循環(huán)整個(gè)購(gòu)物車(chē)
var oprice = ; //商品總價(jià)
$(this).find(".glist").each(function() {//循環(huán)購(gòu)物車(chē)?yán)锏拿總€(gè)商品，this值得是這個(gè)購(gòu)物車(chē)
if($(this).find(".btn").hasClass("option") == true) {//判斷商品被選中的情況下，this指的是購(gòu)物車(chē)的三個(gè)商品
var num = $(this).find(".shuliang").val();//取到數(shù)量，this指的還是購(gòu)物車(chē)的商品一個(gè)
var danjia = $(this).find(".danjia").text();
var xiaoji = num * danjia; //商品小計(jì)
oprice += xiaoji;
$(".zongjia").html(oprice);
};
});
});
};

最后附圖一張

以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)移動(dòng)端手機(jī)商城購(gòu)物車(chē)功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

基于jQuery的message插件實(shí)現(xiàn)右下角彈出消息框
有時(shí)在頁(yè)面加載的時(shí)候，需要在頁(yè)面的右下角彈出一個(gè)小的提示框，顯示一些提示信息給用戶(hù)，通過(guò)使用jQuery的message插件，可以很方便的實(shí)現(xiàn)這個(gè)效果，在使用之前先介紹一下message插件中的方法的使用。
2011-01-01
jQuery實(shí)現(xiàn)的圖片點(diǎn)擊放大縮小功能案例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的圖片點(diǎn)擊放大縮小功能,結(jié)合具體案例形式分析了jquery基于事件響應(yīng)與頁(yè)面屬性動(dòng)態(tài)變換實(shí)現(xiàn)的圖片放大縮小功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2020-01-01
JQuery UI皮膚定制
JQuery UI有著非常豐富的皮膚，JQuery官方提供的就有十幾套，除了官方提供的之外，JQuery還提供了定制皮膚的服務(wù)
2009-07-07
jquery.fileEveryWhere.js 一個(gè)跨瀏覽器的file顯示插件
大牛ppk都說(shuō)過(guò)，在從多表單控件中，上傳文件控件的樣式是最難以控制的。見(jiàn)文章Styling an input type="file"。本插件也多是參考此文
2011-10-10
兩種方法解決javascript url post 特殊字符轉(zhuǎn)義 + & #
本文主要介紹javascript使用url傳值的時(shí)候數(shù)據(jù)丟失的問(wèn)題，希望對(duì)大家有所幫助。
2016-04-04
jQuery操作動(dòng)畫(huà)完整實(shí)例分析
這篇文章主要介紹了jQuery操作動(dòng)畫(huà),結(jié)合完整實(shí)例形式分析了jquery針對(duì)頁(yè)面元素動(dòng)畫(huà)效果相關(guān)實(shí)現(xiàn)技巧,涉及jquery slideUp與slideDown方法的使用,需要的朋友可以參考下
2020-01-01
jquery.alert 彈出式復(fù)選框?qū)崿F(xiàn)代碼
jquery alert 彈出式復(fù)選框，需要的朋友可以參考下，代碼有點(diǎn)亂。
2009-06-06
JQuery樣式操作、click事件以及索引值-選項(xiàng)卡應(yīng)用示例
這篇文章主要介紹了JQuery樣式操作、click事件以及索引值-選項(xiàng)卡應(yīng)用,結(jié)合實(shí)例形式分析了jQuery動(dòng)態(tài)修改css樣式、事件響應(yīng)以及選項(xiàng)卡相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
jQuery取id有.的值的方法
用jQuery取值，當(dāng)一個(gè)id中含有.時(shí)，這個(gè)時(shí)候正常的取法是做不到的，因此請(qǐng)看下文
2014-05-05
jQuery插件HighCharts繪制2D柱狀圖、折線圖和餅圖的組合圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D柱狀圖、折線圖和餅圖的組合圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件同時(shí)繪制折線圖、柱狀圖、餅狀圖組合圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03