jQuery實現(xiàn)全部購物車功能實例
今天是一些購物車的基本功能實現(xiàn),全選
、增減商品數(shù)量
、修改商品小計
、計算總計和總和
、刪除商品
、選中添加背景顏色
等一些常見功能。
?html結(jié)構(gòu)的全部代碼都在文末了,懂的都懂啊?。?!
一、全選
全選分析:
- 全選思路:里面3個小的復(fù)選框按鈕(j-checkbox)選中狀態(tài)(checked)跟著全選按鈕(checkall)走。
- 因為checked 是復(fù)選框的固有屬性,此時我們需要利用prop()方法獲取和設(shè)置該屬性。
- 把全選按鈕狀態(tài)賦值給3小復(fù)選框就可以了。
- 當(dāng)我們每次點擊小的復(fù)選框按鈕,就來判斷:
- 如果小復(fù)選框被選中的個數(shù)等于3 就應(yīng)該把全選按鈕選上,否則全選按鈕不選。
- :checked 選擇器 :checked 查找被選中的表單元素。
?以上是我們要實現(xiàn)的一個基本功能展示,接下來進入案例中來寫一寫。
// 全選 $(".checkall").change(function () { $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked")) }); $(".j-checkbox").change(function () { if ($(".j-checkbox:checked").length === $(".j-checkbox").length) { $(".checkall").prop("checked", true); } else { $(".checkall").prop("checked", false); } });
二、增減商品數(shù)量
增減商品數(shù)量分析:
- 核心思路:首先聲明一個變量,當(dāng)我們點擊+號(increment),就讓這個值++,然后賦值給文本框。
- 注意1: 只能增加本商品的數(shù)量, 就是當(dāng)前+號的兄弟文本框(itxt)的值。
- 修改表單的值是val() 方法
- 注意2: 這個變量初始值應(yīng)該是這個文本框的值,在這個值的基礎(chǔ)上++。要獲取表單的值
- 減號(decrement)思路同理,但是如果文本框的值是1,就不能再減了。
點擊加號數(shù)量增加,點擊減少數(shù)量減少這是一個基本的加減功能的實現(xiàn),最少大于等于一件商品
!
給加號和減號分別一個點擊事件,然后再獲取表單里面的值,用一個變量來自增自減來改變里面的值。
// 數(shù)量 加 $(".increment").click(function () { var n = $(this).siblings(".itxt").val(); n++; $(this).siblings(".itxt").val(n); }) // 數(shù)量 減 $(".decrement").click(function () { var n = $(this).siblings(".itxt").val(); if (n == 1) { return false; } n--; $(this).siblings(".itxt").val(n); });
三、修改商品小計
修改商品小計分析:
- 核心思路:每次點擊+號或者-號,根據(jù)文本框的值 乘以 當(dāng)前商品的價格 就是 商品的小計
- 注意1: 只能增加本商品的小計, 就是當(dāng)前商品的小計模塊(p-sum)
- 修改普通元素的內(nèi)容是text() 方法
- 注意2: 當(dāng)前商品的價格,要把¥符號去掉再相乘 截取字符串 substr(1)
- parents(‘選擇器') 可以返回指定祖先元素
- 最后計算的結(jié)果如果想要保留2位小數(shù) 通過 toFixed(2) 方法
- 用戶也可以直接修改表單里面的值,同樣要計算小計。 用表單change事件
- 用最新的表單內(nèi)的值 乘以 單價即可 但是還是當(dāng)前商品小計
因為是點擊加減號才修改小計里面的值,所以這里的代碼要寫在加減號的點擊事件里面,當(dāng)點擊這個事件以后,取出單價里面的值乘以數(shù)量里的值就可以得到總的價錢,這里就是整體代碼的基本實現(xiàn)過程稿了。
// 數(shù)量 加 $(".increment").click(function () { var n = $(this).siblings(".itxt").val(); n++; $(this).siblings(".itxt").val(n); // 修改商品小計 var p = $(this).parents(".p-num").siblings(".p-price").html(); p = p.substr(1); var price = (p * n).toFixed(2); $(this).parent().parent().siblings(".p-sum").html("¥" + price); getSum(); }) // 數(shù)量 減 $(".decrement").click(function () { var n = $(this).siblings(".itxt").val(); if (n == 1) { return false; } n--; $(this).siblings(".itxt").val(n); // 修改商品小計 var p = $(this).parents(".p-num").siblings(".p-price").html(); p = p.substr(1); var price = (p * n).toFixed(2); $(this).parent().parent().siblings(".p-sum").html("¥" + price); getSum(); });
四、計算總計和總和
計算總計和總和分析:
- 核心思路:把所有文本框里面的值相加就是總計數(shù)量??傤~同理
- 文本框里面的值不相同,如果想要相加需要用到each遍歷。聲明一個變量,相加即可
- 點擊+號-號,會改變總計和總額,如果用戶修改了文本框里面的值同樣會改變總計和總額
- 因此可以封裝一個函數(shù)求總計和總額的, 以上2個操作調(diào)用這個函數(shù)即可。
- 注意1: 總計是文本框里面的值相加用 val() 總額是普通元素的內(nèi)容用text()
- 要注意普通元素里面的內(nèi)容要去掉¥并且轉(zhuǎn)換為數(shù)字型才能相加
本質(zhì)應(yīng)該是選中復(fù)選框,該商品才會被統(tǒng)計到結(jié)算欄里,這里我寫的是購物車里面所以數(shù)量和小計的總和,所以數(shù)量以改變小計也在變,相應(yīng)的也在影響著結(jié)算欄里面的數(shù)據(jù)。
// 封裝結(jié)算商品的個數(shù)及價錢 getSum(); function getSum() { var count = 0; var money = 0; $(".itxt").each(function (i, ele) { count += parseInt($(ele).val()); }); $(".amount-sum em").text(count); $(".p-sum").each(function (i, ele) { money += parseFloat($(ele).text().substr(1)) }); $(".price-sum em").text("¥" + money.toFixed(2)); }
五、刪除商品?
刪除商品模塊分析:
- 核心思路:把商品remove() 刪除元素即可
- 有三個地方需要刪除: 1. 商品后面的刪除按鈕 2. 刪除選中的商品 3. 清理購物車
- 商品后面的刪除按鈕: 一定是刪除當(dāng)前的商品,所以從 $(this) 出發(fā)
- 刪除選中的商品: 先判斷小的復(fù)選框按鈕是否選中狀態(tài),如果是選中,則刪除對應(yīng)的商品
- 清理購物車: 則是把所有的商品全部刪掉
單擊商品后面刪除
就刪除此商品,點擊下面的刪除選中的商品
就刪除復(fù)選框中選中的商品,單機清理購物車
就刪除購物車里面所有商品。
// 刪除 // 商品后面的刪除 $(".p-action a").click(function () { $(this).parents(".cart-item").remove(); getSum(); }); // 刪除選中的商品 $(".remove-batch").click(function () { $(".j-checkbox:checked").parents(".cart-item").remove(); getSum(); }) // 清空購物車 $(".clear-all").click(function () { $(".cart-item").remove(); getSum(); })
六、選中商品添加背景
選中商品添加背景分析:
- 核心思路:選中的商品添加背景,不選中移除背景即可
- 全選按鈕點擊:如果全選是選中的,則所有的商品添加背景,否則移除背景
- 小的復(fù)選框點擊: 如果是選中狀態(tài),則當(dāng)前商品添加背景,否則移除背景
- 這個背景,可以通過類名修改,添加類和刪除類
是選中就添加背景顏色,所以這里的代碼應(yīng)該寫在復(fù)選框改變的事件里面。
// 全選 $(".checkall").change(function () { $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked")) // 給商品添加背景顏色 if ($(this).prop("checked")) { $(".cart-item").addClass("check-cart-item"); } else { $(".cart-item").removeClass("check-cart-item"); } }); $(".j-checkbox").change(function () { if ($(".j-checkbox:checked").length === $(".j-checkbox").length) { $(".checkall").prop("checked", true); } else { $(".checkall").prop("checked", false); } // 給商品添加背景顏色 if ($(this).prop("checked")) { $(this).parents(".cart-item").addClass("check-cart-item"); } else { $(this).parents(".cart-item").removeClass("check-cart-item"); } });
七、html 全部核心代碼
<div class="c-container"> <div class="w"> <div class="cart-filter-bar"> <em>全部商品</em> </div> <!-- 購物車主要核心區(qū)域 --> <div class="cart-warp"> <!-- 頭部全選模塊 --> <div class="cart-thead"> <div class="t-checkbox"> <input type="checkbox" name="" id="" class="checkall"> 全選 </div> <div class="t-goods">商品</div> <div class="t-price">單價</div> <div class="t-num">數(shù)量</div> <div class="t-sum">小計</div> <div class="t-action">操作</div> </div> <!-- 商品詳細模塊 --> <div class="cart-item-list"> <div class="cart-item check-cart-item"> <div class="p-checkbox"> <input type="checkbox" name="" id="" checked class="j-checkbox"> </div> <div class="p-goods"> <div class="p-img"> <img src="upload/p1.jpg" alt=""> </div> <div class="p-msg">【5本26.8元】經(jīng)典兒童文學(xué)彩圖青少版八十天環(huán)游地球中學(xué)生語文教學(xué)大綱</div> </div> <div class="p-price">¥12.60</div> <div class="p-num"> <div class="quantity-form"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="decrement">-</a> <input type="text" class="itxt" value="1"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="increment">+</a> </div> </div> <div class="p-sum">¥12.60</div> <div class="p-action"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >刪除</a></div> </div> <div class="cart-item"> <div class="p-checkbox"> <input type="checkbox" name="" id="" class="j-checkbox"> </div> <div class="p-goods"> <div class="p-img"> <img src="upload/p2.jpg" alt=""> </div> <div class="p-msg">【2000張貼紙】貼紙書 3-6歲 貼畫兒童 貼畫書全套12冊 貼畫 貼紙兒童 汽</div> </div> <div class="p-price">¥24.80</div> <div class="p-num"> <div class="quantity-form"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="decrement">-</a> <input type="text" class="itxt" value="1"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="increment">+</a> </div> </div> <div class="p-sum">¥24.80</div> <div class="p-action"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >刪除</a></div> </div> <div class="cart-item"> <div class="p-checkbox"> <input type="checkbox" name="" id="" class="j-checkbox"> </div> <div class="p-goods"> <div class="p-img"> <img src="upload/p3.jpg" alt=""> </div> <div class="p-msg">唐詩三百首+成語故事全2冊 一年級課外書 精裝注音兒童版 小學(xué)生二三年級課外閱讀書籍</div> </div> <div class="p-price">¥29.80</div> <div class="p-num"> <div class="quantity-form"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="decrement">-</a> <input type="text" class="itxt" value="1"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="increment">+</a> </div> </div> <div class="p-sum">¥29.80</div> <div class="p-action"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >刪除</a></div> </div> </div> <!-- 結(jié)算模塊 --> <div class="cart-floatbar"> <div class="select-all"> <input type="checkbox" name="" id="" class="checkall">全選 </div> <div class="operation"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="remove-batch"> 刪除選中的商品</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="clear-all">清理購物車</a> </div> <div class="toolbar-right"> <div class="amount-sum">已經(jīng)選<em>1</em>件商品</div> <div class="price-sum">總價: <em>¥12.60</em></div> <div class="btn-area">去結(jié)算</div> </div> </div> </div> </div> </div>
以上所述是小編給大家介紹的jQuery實現(xiàn)全部購物車功能實例,希望對大家有所幫助。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
如何使用jquery動態(tài)加載js,css文件實現(xiàn)代碼
在jquery中要實現(xiàn)動態(tài)加載js文件的方法有很多種,最簡單的我們可以直接利用$.include()方法來實現(xiàn),感興趣的朋友可以參考下哈2013-04-04基于jQuery實現(xiàn)仿微博發(fā)布框字數(shù)提示
這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)仿微博發(fā)布框字數(shù)提示的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-07-07jquery和雅虎的yql服務(wù)實現(xiàn)天氣預(yù)報服務(wù)示例
本文介紹一個利用Jquery和雅虎的YQL服務(wù)實現(xiàn)天氣預(yù)報功能,需要的朋友可以參考下2014-02-02JQuery Ajax執(zhí)行跨域請求數(shù)據(jù)的解決方案
今天小編就為大家分享一篇關(guān)于JQuery Ajax執(zhí)行跨域請求數(shù)據(jù)的解決方案,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2018-12-12