jQuery實(shí)現(xiàn)全部購物車功能實(shí)例
更新時(shí)間：2021年11月29日 12:12:13 作者：靠技術(shù)吃飯
本文詳細(xì)講解了jQuery實(shí)現(xiàn)全部購物車功能，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
今天是一些購物車的基本功能實(shí)現(xiàn)，全選、增減商品數(shù)量、修改商品小計(jì)、計(jì)算總計(jì)和總和、刪除商品、選中添加背景顏色等一些常見功能。
?html結(jié)構(gòu)的全部代碼都在文末了，懂的都懂?。。。?/p>
一、全選
全選分析：
- 全選思路：里面3個(gè)小的復(fù)選框按鈕（j-checkbox）選中狀態(tài)（checked）跟著全選按鈕（checkall）走。
- 因?yàn)閏hecked 是復(fù)選框的固有屬性，此時(shí)我們需要利用prop()方法獲取和設(shè)置該屬性。
- 把全選按鈕狀態(tài)賦值給3小復(fù)選框就可以了。
- 當(dāng)我們每次點(diǎn)擊小的復(fù)選框按鈕，就來判斷：
- 如果小復(fù)選框被選中的個(gè)數(shù)等于3 就應(yīng)該把全選按鈕選上，否則全選按鈕不選。
- :checked 選擇器 :checked 查找被選中的表單元素。
?以上是我們要實(shí)現(xiàn)的一個(gè)基本功能展示，接下來進(jì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ù)量分析：
- 核心思路：首先聲明一個(gè)變量，當(dāng)我們點(diǎn)擊+號(hào)（increment），就讓這個(gè)值++，然后賦值給文本框。
- 注意1： 只能增加本商品的數(shù)量， 就是當(dāng)前+號(hào)的兄弟文本框（itxt）的值。
- 修改表單的值是val() 方法
- 注意2： 這個(gè)變量初始值應(yīng)該是這個(gè)文本框的值，在這個(gè)值的基礎(chǔ)上++。要獲取表單的值
- 減號(hào)（decrement）思路同理，但是如果文本框的值是1，就不能再減了。
點(diǎn)擊加號(hào)數(shù)量增加，點(diǎn)擊減少數(shù)量減少這是一個(gè)基本的加減功能的實(shí)現(xiàn)，最少大于等于一件商品！
給加號(hào)和減號(hào)分別一個(gè)點(diǎn)擊事件，然后再獲取表單里面的值，用一個(gè)變量來自增自減來改變里面的值。
// 數(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ì)
修改商品小計(jì)分析：
- 核心思路：每次點(diǎn)擊+號(hào)或者-號(hào)，根據(jù)文本框的值 乘以 當(dāng)前商品的價(jià)格 就是 商品的小計(jì)
- 注意1： 只能增加本商品的小計(jì)， 就是當(dāng)前商品的小計(jì)模塊（p-sum）
- 修改普通元素的內(nèi)容是text() 方法
- 注意2： 當(dāng)前商品的價(jià)格，要把￥符號(hào)去掉再相乘 截取字符串 substr(1)
- parents(‘選擇器') 可以返回指定祖先元素
- 最后計(jì)算的結(jié)果如果想要保留2位小數(shù) 通過 toFixed(2) 方法
- 用戶也可以直接修改表單里面的值，同樣要計(jì)算小計(jì)。 用表單change事件
- 用最新的表單內(nèi)的值 乘以 單價(jià)即可 但是還是當(dāng)前商品小計(jì)
因?yàn)槭屈c(diǎn)擊加減號(hào)才修改小計(jì)里面的值，所以這里的代碼要寫在加減號(hào)的點(diǎn)擊事件里面，當(dāng)點(diǎn)擊這個(gè)事件以后，取出單價(jià)里面的值乘以數(shù)量里的值就可以得到總的價(jià)錢，這里就是整體代碼的基本實(shí)現(xiàn)過程稿了。
// 數(shù)量 加
$(".increment").click(function () {
var n = $(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
// 修改商品小計(jì)
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);
// 修改商品小計(jì)
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();
});
四、計(jì)算總計(jì)和總和
計(jì)算總計(jì)和總和分析：
- 核心思路：把所有文本框里面的值相加就是總計(jì)數(shù)量。總額同理
- 文本框里面的值不相同，如果想要相加需要用到each遍歷。聲明一個(gè)變量，相加即可
- 點(diǎn)擊+號(hào)-號(hào)，會(huì)改變總計(jì)和總額，如果用戶修改了文本框里面的值同樣會(huì)改變總計(jì)和總額
- 因此可以封裝一個(gè)函數(shù)求總計(jì)和總額的， 以上2個(gè)操作調(diào)用這個(gè)函數(shù)即可。
- 注意1： 總計(jì)是文本框里面的值相加用 val() 總額是普通元素的內(nèi)容用text()
- 要注意普通元素里面的內(nèi)容要去掉￥并且轉(zhuǎn)換為數(shù)字型才能相加
本質(zhì)應(yīng)該是選中復(fù)選框，該商品才會(huì)被統(tǒng)計(jì)到結(jié)算欄里，這里我寫的是購物車?yán)锩嫠詳?shù)量和小計(jì)的總和，所以數(shù)量以改變小計(jì)也在變，相應(yīng)的也在影響著結(jié)算欄里面的數(shù)據(jù)。
// 封裝結(jié)算商品的個(gè)數(shù)及價(jià)錢
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() 刪除元素即可
- 有三個(gè)地方需要?jiǎng)h除： 1. 商品后面的刪除按鈕 2. 刪除選中的商品 3. 清理購物車
- 商品后面的刪除按鈕： 一定是刪除當(dāng)前的商品，所以從 $(this) 出發(fā)
- 刪除選中的商品： 先判斷小的復(fù)選框按鈕是否選中狀態(tài)，如果是選中，則刪除對(duì)應(yīng)的商品
- 清理購物車： 則是把所有的商品全部刪掉
單擊商品后面刪除就刪除此商品，點(diǎn)擊下面的刪除選中的商品就刪除復(fù)選框中選中的商品，單機(jī)清理購物車就刪除購物車?yán)锩嫠猩唐贰?/p>
// 刪除
// 商品后面的刪除
$(".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();
})
六、選中商品添加背景
選中商品添加背景分析：
- 核心思路：選中的商品添加背景，不選中移除背景即可
- 全選按鈕點(diǎn)擊：如果全選是選中的，則所有的商品添加背景，否則移除背景
- 小的復(fù)選框點(diǎn)擊： 如果是選中狀態(tài)，則當(dāng)前商品添加背景，否則移除背景
- 這個(gè)背景，可以通過類名修改，添加類和刪除類
是選中就添加背景顏色，所以這里的代碼應(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">單價(jià)</div>
<div class="t-num">數(shù)量</div>
<div class="t-sum">小計(jì)</div>
<div class="t-action">操作</div>
</div>
<!-- 商品詳細(xì)模塊 -->
<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冊(cè) 貼畫 貼紙兒童 汽</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冊(cè) 一年級(jí)課外書 精裝注音兒童版 小學(xué)生二三年級(jí)課外閱讀書籍</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">總價(jià)： <em>￥12.60</em></div>
<div class="btn-area">去結(jié)算</div>
</div>
</div>
</div>
</div>
</div>
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)全部購物車功能實(shí)例，希望對(duì)大家有所幫助。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了jQuery 仿百度輸入標(biāo)簽插件的具體實(shí)現(xiàn),需要的朋友可以參考下2014-07-07
這篇文章主要為大家詳細(xì)介紹了jquery插表單件form使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
滾動(dòng)圖片效果 jquery實(shí)現(xiàn)回旋滾動(dòng)效果
jquery滾動(dòng)圖片效果,有些新手朋友可能不是很清楚，今天在網(wǎng)上找到一款回旋滾動(dòng)效果，拿出來和大家一起分享，感興趣的朋友可以了解下哦2013-01-01
如何使用jquery動(dòng)態(tài)加載js,css文件實(shí)現(xiàn)代碼
在jquery中要實(shí)現(xiàn)動(dòng)態(tài)加載js文件的方法有很多種,最簡(jiǎn)單的我們可以直接利用$.include()方法來實(shí)現(xiàn)，感興趣的朋友可以參考下哈2013-04-04
昨天看到一個(gè)園友的blog中有個(gè)頁面下滾后出現(xiàn)用于"回到頁面頂部"按鈕的效果, 感覺挺不錯(cuò)的, 所以自己也寫了一個(gè), 用jQuery寫是再簡(jiǎn)單不過了. 下面就直接給出代碼了2011-06-06
基于jQuery實(shí)現(xiàn)仿微博發(fā)布框字?jǐn)?shù)提示
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)仿微博發(fā)布框字?jǐn)?shù)提示的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
jQuery實(shí)現(xiàn)ajax的嵌套請(qǐng)求案例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax的嵌套請(qǐng)求,結(jié)合具體實(shí)例形式分析了ajax嵌套請(qǐng)求的原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-02-02
jquery和雅虎的yql服務(wù)實(shí)現(xiàn)天氣預(yù)報(bào)服務(wù)示例
本文介紹一個(gè)利用Jquery和雅虎的YQL服務(wù)實(shí)現(xiàn)天氣預(yù)報(bào)功能,需要的朋友可以參考下2014-02-02
JQuery Ajax執(zhí)行跨域請(qǐng)求數(shù)據(jù)的解決方案
今天小編就為大家分享一篇關(guān)于JQuery Ajax執(zhí)行跨域請(qǐng)求數(shù)據(jù)的解決方案，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2018-12-12
這篇文章主要介紹了如何用jquery控制表格奇偶行及活動(dòng)行顏色,需要的朋友可以參考下2014-04-04