jquery實現(xiàn)手機(jī)端單店鋪購物車結(jié)算刪除功能
手機(jī)端一部分用flex布局寫在這里看著不爽把css全部刪除了。只留下js結(jié)算功能js很臃腫,請留下寶貴意見提升性能。改天上多店鋪購物車手機(jī)端原版截圖
效果圖:
圖(1)全部勾選的效果
圖(2)勾選,點擊“刪除”效果
代碼如下:
<!DOCTYPE html> <html lang="zh-cn"> <head> <title>購物車</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!----確保適當(dāng)?shù)睦L制和觸屏縮放,讓網(wǎng)頁的寬度自動適應(yīng)手機(jī)屏幕的寬度----> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <!----關(guān)鍵詞搜索----> <meta name="keywords" content=""> <!----描述網(wǎng)頁的核心內(nèi)容,通常為網(wǎng)頁內(nèi)容的摘要信息----> <meta name="description" content="" /> <meta name="format-detection" content="telephone=no" /> <meta name="format-detection" content="email=no" /> <link rel="stylesheet" href="css/basic.css" rel="external nofollow" > <link rel="stylesheet" href="css/css.css" rel="external nofollow" > </head> <style> .flex-center{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -o-box-pack: center; box-pack: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -o-box-align: center; box-align: center; } .kong{ font-size: 0.3rem; height: 80vh; color: #333333; } .kong a { color: #333333; text-decoration: double; } </style> <body> <main class="dfk_main"> <dl class="gwc_dl"> <dt class="gwc_dt"><label class="gwc_1 gwc_spxz"><input type="checkbox" class="gwc_qx2 GoodsCheck" value=""></label></dt> <dd class="gwc_dd2">零食 <span>¥<span class="gwc_dd_p">1.00</span></span> <span class="spjj gwc_jj"> <input type="button" class="jian" value="-"><input type="text" class="shuliang" value="1"><input type="button" class="jia" value="+"> </span></dd> </dl> <dl class="gwc_dl"> <dt class="gwc_dt"><label class="gwc_1 gwc_spxz"><input type="checkbox" class="gwc_qx2 GoodsCheck" value=""></label></dt> <dd class="gwc_dd2">零食 <span>¥<span class="gwc_dd_p">1.00</span></span> <span class="spjj gwc_jj"> <input type="button" class="jian" value="-"><input type="text" class="shuliang" value="1"><input type="button" class="jia" value="+"> </span></dd> </dl> <section class="gwc_delectbtn"> <button type="button" class="delete">刪除</button><p>共 <span class="colb51 gwc_sl">0</span> 件商品 共計:¥<span class="ShopTotal">0.00</span></p> </section> </main> <footer class="gwc_footer"> <form action="#" method="get"> <p class="gwc_qx"><label class="gwc_1 gwc_label"><input type="checkbox" class="gwc_qx2 ShopCheck" value=""></label><span>全選</span> <span class="gwc_jsp"><span >合計:¥<b class="ShopTotal">0.00</b></span><span>不含郵費</span></span> <button type="button" class="gwc_btnjs">結(jié)算(<span class="gwc_sl">0</span>)</button> </p> </form> </footer> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <script> $(function(){ $(".shuliang").keyup(function() { if (isNaN($(this).val()) || parseInt($(this).val()) < 1 || $(this).val()=="") { $(this).val("1"); } }); // 數(shù)量加 $(".jia").click(function(){ var t = $(this).parent().find(".shuliang"); t.val(parseInt(t.val())+1); var n = parseInt($(this).siblings(".shuliang").val()); //得到商品的數(shù)量 var p = parseFloat($(this).parent().siblings().children(".gwc_dd_p").text()); //得到商品的單價 var tot = p * n; //計算單個商品的總價 TotalPrice(); }); // 數(shù)量減 $(".jian").click(function(){ var t = $(this).parent().find(".shuliang"); if (parseInt(t.val())>1) { t.val(parseInt(t.val())-1); } var n = parseInt($(this).siblings(".shuliang").val()); //得到商品的數(shù)量 var p = parseFloat($(this).parent().siblings().children(".gwc_dd_p").text()); //得到商品的單價 var tot = p * n; //計算單個商品的總價 TotalPrice(); }); // 點擊商品按鈕 $(".GoodsCheck").change(function() { $(this).parent().toggleClass('gwc_active') var goods = $(this).parents('.dfk_main').find(".GoodsCheck"); //獲取本店鋪的所有商品 var goodsC = $(this).parents('.dfk_main').find(".GoodsCheck:checked"); //獲取本店鋪所有被選中的商品 var Shops = $(".ShopCheck"); //獲取本店鋪的全選按鈕 if (goods.length == goodsC.length) { //如果選中的商品等于所有商品 Shops.prop('checked', true).parent(".gwc_label").addClass("gwc_active"); //店鋪全選按鈕被選中 TotalPrice(); } else { //如果選中的商品不等于所有商品 Shops.prop('checked', false).parent(".gwc_label").removeClass("gwc_active"); //店鋪全選按鈕不被選中 // 計算 TotalPrice(); } }); // 點擊店鋪 $(".ShopCheck").change(function() { if ($(this).prop("checked") == true) { //如果全選按鈕被選中 $(".gwc_label").addClass("gwc_active"); $(".GoodsCheck").prop('checked', true).parent(".gwc_1").addClass("gwc_active"); //所有按鈕都被選中 // 計算 TotalPrice() } else { $(".gwc_label").removeClass("gwc_active"); $(".GoodsCheck").prop('checked', false).parent(".gwc_1").removeClass("gwc_active"); //else所有按鈕不全選 // 計算 TotalPrice(); } }); //刪除 $('.delete').click(function () { $(".dfk_main input[type='checkbox']:checked").each(function() { // 遍歷選中的checkbox var goods = $(this).parents('.dfk_main').find(".GoodsCheck"); //獲取本店鋪的所有商品 var goodsC = $(this).parents('.dfk_main').find(".GoodsCheck:checked"); //獲取本店鋪所有被選中的商品 var Shops = $(".ShopCheck"); //獲取本店鋪的全選按鈕 if (goods.length == goodsC.length) { //如果選中的商品等于所有商品 $('.dfk_main').html('<a href="#" rel="external nofollow" >購物車為空<br>點擊去購買</a>').addClass('flex-center kong'); Shops.prop('checked', false).parent(".gwc_label").removeClass("gwc_active"); //店鋪全選按鈕不被選中 $('.gwc_sl,.ShopTotal').text(0.00); TotalPrice(); } else { //如果選中的商品不等于所有商品 var n = $(this).parents('.gwc_dl').index(); // 獲取checkbox所在行的順序 $(".dfk_main").find(".gwc_dl:eq("+n+")").remove(); TotalPrice(); } }); }); function TotalPrice() { var oprice = 0; //店鋪總價 var sl = 0;//數(shù)量 $(".dfk_main .gwc_dl .GoodsCheck").each(function () { //循環(huán)店鋪里面的商品 if ($(this).is(":checked")) { //如果該商品被選中 var num = parseInt($(this).parents(".gwc_dl").find(".shuliang").val()); //得到商品的數(shù)量 // alert(num); var price = parseFloat($(this).parents(".gwc_dl").find(".gwc_dd_p").text()); //得到商品的單價 var total = price * num; //計算單個商品的總價 oprice += parseFloat(total); //計算該店鋪的總價 sl += parseInt(num); } $('.gwc_sl').text(sl); $(".ShopTotal").text(oprice.toFixed(2)); //輸出全部總價 }); } }); // document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px'; </script> </body> </html>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
- jquery購物車結(jié)算功能實現(xiàn)方法
- jQuery實現(xiàn)移動端手機(jī)商城購物車功能
- 購物車前端開發(fā)(jQuery和bootstrap3)
- jQuery使用cookie與json簡單實現(xiàn)購物車功能
- jQuery基于json與cookie實現(xiàn)購物車的方法
- 使用Python的Django框架結(jié)合jQuery實現(xiàn)AJAX購物車頁面
- jQuery實現(xiàn)購物車多物品數(shù)量的加減+總價計算
- jQuery實現(xiàn)加入購物車飛入動畫效果
- 基于JQuery實現(xiàn)的類似購物商城的購物車
- jQuery模擬淘寶購物車功能
相關(guān)文章
如何確保JavaScript的執(zhí)行順序 之jQuery.html并非萬能鑰匙
在上一篇文章《如何確保JavaScript的執(zhí)行順序 - 之jQuery.html深度分析》中,我們揭示了jQuery.html函數(shù)之所以能在各種瀏覽器下保持動態(tài)JS順序執(zhí)行,其秘密在于 – 同步AJAX獲取外部JavaScript。2011-03-03jquery+ajax+C#實現(xiàn)無刷新操作數(shù)據(jù)庫數(shù)據(jù)的簡單實例
本篇文章主要是對jquery+ajax+C#實現(xiàn)無刷新操作數(shù)據(jù)庫數(shù)據(jù)的簡單實例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jQuery實現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)飛機(jī)大戰(zhàn)小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-07-07基于jQuery實現(xiàn)火焰燈效果導(dǎo)航菜單
這篇文章主要介紹了jQuery實現(xiàn)火焰燈效果導(dǎo)航菜單的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01jQuery學(xué)習(xí)筆記之Ajax用法實例詳解
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之Ajax用法,結(jié)合實例形式較為詳細(xì)的分析總結(jié)了jQuery中ajax的相關(guān)使用技巧,包括ajax請求、載入、處理、傳遞等,需要的朋友可以參考下2015-12-12ASP.NET jQuery 實例13 原創(chuàng)jQuery文本框字符限制插件-TextArea Counter
這節(jié)介紹一個自己寫的jQuery文本框字符限制插件,至于如何寫插件,我這里就不多講了,可以查看相關(guān)介紹,這里主要介紹下該插件的功能2012-02-02