純jquery實(shí)現(xiàn)模仿淘寶購(gòu)物車結(jié)算
這篇文章里,將會(huì)提到購(gòu)物車?yán)锏乃泄δ?。包括全選、單選金額改變。在增加數(shù)量時(shí)金額也會(huì)相應(yīng)改變。
效果圖展示:
說下大致的思路吧:
1、首先是計(jì)算一行的價(jià)格。這個(gè)功能在上篇博客里有提到,這里就不列舉出來了。
2、遍歷選中的幾行,將每行的數(shù)值相加。
3、將值賦給總金額顯示出來。當(dāng)取消勾選或加減數(shù)量時(shí),金額會(huì)相應(yīng)改變。
下面是具體的js部分:
<script type="text/javascript"> $(function(){ //計(jì)算總金額 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);//將計(jì)算出的總金額顯示 $(".total").text(total_price);//將計(jì)算出的總數(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(); }); // 減號(hào)樣式 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,改變減號(hào)的樣式 } // 加 $(".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());//獲取當(dāng)前一行的單價(jià) 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());//獲取當(dāng)前一行的單價(jià) 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模仿淘寶懸掛購(gòu)物車物品結(jié)算功能-附源碼下載
- jQuery實(shí)現(xiàn)購(gòu)物車多物品數(shù)量的加減+總價(jià)計(jì)算
- jQuery實(shí)現(xiàn)加入購(gòu)物車飛入動(dòng)畫效果
- JQuery實(shí)現(xiàn)的購(gòu)物車功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格)
- jQuery實(shí)現(xiàn)購(gòu)物車計(jì)算價(jià)格功能的方法
- 基于JQuery實(shí)現(xiàn)的類似購(gòu)物商城的購(gòu)物車
- jQuery實(shí)現(xiàn)購(gòu)物車數(shù)字加減效果
- jQuery+HTML5加入購(gòu)物車代碼分享
- jquery實(shí)現(xiàn)購(gòu)物車基本功能
- jquery購(gòu)物車結(jié)算功能實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)購(gòu)物車
相關(guān)文章
jQuery 數(shù)據(jù)緩存模塊進(jìn)化史詳細(xì)介紹
數(shù)據(jù)緩存系統(tǒng)最早應(yīng)該是jQuery1.2引入的,那時(shí)它的事件系統(tǒng)完成照搬DE大神的addEvent.js,而addEvent在實(shí)現(xiàn)有個(gè)缺憾,它把事件的回調(diào)都放到EventTarget之上,這會(huì)引發(fā)循環(huán)引用2012-11-11jquery.qtip提示信息插件用法簡(jiǎn)單實(shí)例
這篇文章主要介紹了jquery.qtip提示信息插件用法,結(jié)合簡(jiǎn)單實(shí)例形式分析了該插件用于顯示提示信息的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06jquery引入外部CDN 加載失敗則引入本地jq庫(kù)
這篇文章主要介紹了網(wǎng)站加載第三方CDN,如果jQuery庫(kù)不成功則加載本地的jquery的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-05-05jQuery實(shí)現(xiàn)簡(jiǎn)單隔行變色的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單隔行變色的方法,涉及jQuery針對(duì)頁面元素樣式的相關(guān)操作技巧,需要的朋友可以參考下2016-02-02jquery實(shí)現(xiàn)表單驗(yàn)證并阻止非法提交
本文給大家分享的是使用jquery實(shí)現(xiàn)表單驗(yàn)證并阻止非法提交的代碼,思路非常不錯(cuò),這里推薦給小伙伴們參考下。2015-07-07解決qrcode.js生成二維碼時(shí)必須定義一個(gè)空div的問題
這篇文章主要介紹了解決qrcode.js生成二維碼時(shí)必須定義一個(gè)空div的問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07jQuery代碼實(shí)現(xiàn)發(fā)展歷程時(shí)間軸特效
這篇文章主要介紹了jQuery代碼實(shí)現(xiàn)發(fā)展歷程時(shí)間軸特效代碼,帶有左右箭頭,數(shù)字時(shí)間軸選項(xiàng)卡切換特效,有需要的小伙伴們可以來參考下2015-07-07jquery實(shí)現(xiàn)的代替?zhèn)鹘y(tǒng)checkbox樣式插件
這篇文章主要介紹了jquery實(shí)現(xiàn)的代替?zhèn)鹘y(tǒng)checkbox樣式插件,可實(shí)現(xiàn)滑動(dòng)選擇的效果,需要的朋友可以參考下2015-06-06