jQuery實現全部購物車功能例項
阿新 • • 發佈：2021-12-01
目錄
- 一、全選
- 二、增減商品數量
- 三、修改商品小計
- 四、計算總計和總和
- 五、刪除商品
- 六、選中商品新增背景
- 七、html 全部核心程式碼
今天是一些購物車的基本功能實現，全選、增減商品數量、修改商品小計、計算總計和總和、刪除商品、選中新增背景顏色等一些常見功能。
html結構的全部程式碼都在文末了，懂的都懂啊！！！
一、全選
全選分析：
- 全選思路：裡面3個小的複選框按鈕（j-checkbox）選中狀態（checked）跟著全選按鈕（checkall）走。
- 因為checked 是複選框的固有屬性，此時我們需要利用prop()方法獲取和設定該屬性。
- 把全選按鈕狀態賦值給3小複選框就可以了。
- 當我們每次點選小的複選框按鈕，就來判斷：
- 如果小複選框被選中的個數等於3 就應該把全選按鈕選上，否則全選按鈕不選。
- :checked 選擇器 :checked 查詢被選中的表單元素。
以上是我們要實現的一個基本功能展示，接下來進入案例中來寫一寫。
// 全選
$(".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);
}
});二、增減商品數量
增減商品數量分析：
- 核心思路：首先宣告一個變數，當我們點選+號（increment），就讓這個值++，然後賦值給文字框。
- 注意1： 只能增加本商品的數量， 就是當前+號的兄弟文字框（itxt）的值。
- 修改表單的值是val() 方法
- 注意2： 這個變數初始值應該是這個文字框的值，在這個值的基礎上++。要獲取表單的值
- 減號（decrement）思路同理，但是如果文字框的值是1，就不能再減了。
點選加號數量增加，點選減少數量減少這是一個基本的加減功能的實現，最少大於等於一件商品！
給加號和減號分別一個點選事件，然後再獲取表單裡面的值，用一個變數來自增自減來改變裡面的值。
// 數量 加
$(".increment").click(function () {
var n = $(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
})
// 數量 減
$(".decrement").click(function () {
var n = $(this).siblings(".itxt").val();
if (n == 1) {
return false;
}
n--;
$(this).siblings(".itxt").val(n);
});
三、修改商品小計
修改商品小計分析：
- 核心思路：每次點選+號或者-號，根據文字框的值 乘以 當前商品的價格 就是 商品的小計
- 注意1： 只能增加本商品的小計， 就是當前商品的小計模組（p-sum）
- 修改普通元素的內容是text() 方法
- 注意2： 當前商品的價格，要把￥符號去掉再相乘 擷取字串 substr(1)
- parents(‘選擇器') 可以返回指定祖先元素
- 最後計算的結果如果想要保留2位小數 通過 toFixed(2) 方法
- 使用者也可以直接修改表單裡面的值，同樣要計算小計。 用表單change事件
- 用最新的表單內的值 乘以 單價即可 但是還是當前商品小計
因為是點選加減號才修改小計裡面的值，所以這裡的程式碼要寫在加減號的點選事件裡面，當點選這個事件以後，取出單價裡面的值乘以數量裡的值就可以得到總的價錢，這裡就是整體程式碼的基本實現過程稿了。
// 數量 加
$(".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();
})
// 數量 減
$(".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();
});
四、計算總計和總和
計算總計和總和分析：
- 核心思路：把所有文字框裡面的值相加就是總計數量。總額同理
- 文字框裡面的值不相同，如果想要相加需要用到each遍歷。宣告一個變數，相加即可
- 點選+號-號，會改變總計和總額，如果使用者修改了文字框裡面的值同樣會改變總計和總額
- 因此可以封裝一個函式求總計和總額的， 以上2個操作呼叫這個函式即可。
- 注意1： 總計是文字框裡面的值相加用 val() 總額是普通元素的內容用text()
- 要注意普通元素裡面的內容要去掉￥並且轉換為數字型才能相加
本質應該是選中複選框，該商品才會被統計到結算欄裡，這裡我寫的是購物車裡面所以數量和小計的總和，所以數量以改變小計也在變，相應的也在影響著結算欄裡面的資料。
// 封裝結算商品的個數及價錢
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. 清理購物車
- 商品後面的刪除按鈕： 一定是刪除當前的商品，所以從 $(this) 出發
- 刪除選中的商品： 先判斷小的複選框按鈕是否選中狀態，如果是選中，則刪除對應的商品
- 清理購物車： 則是把所有的商品全部刪掉
單擊商品後面刪除就刪除此商品，點選下面的刪除選中的商品就刪除複選框中選中的商品，單機清理購物車就刪除購物車裡面所有商品。
// 刪除
// 商品後面的刪除
$(".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();
})
六、選中商品新增背景
選中商品新增背景分析：
- 核心思路：選中的商品新增背景，不選中移除背景即可
- 全選按鈕點選：如果全選是選中的，則所有的商品新增背景，否則移除背景
- 小的複選框點選： 如果是選中狀態，則當前商品新增背景，否則移除背景
- 這個背景，可以通過類名修改，新增類和刪除類
是選中就新增背景顏色，所以這裡的程式碼應該寫在複選框改變的事件裡面。
// 全選
$(".checkall").change(function () {
$(".j-checkbox,$(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",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>
<!-- 購物車主要核心區域 -->
<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">數量</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元】經典兒童文學彩圖青少版八十天環遊地球中學生語文教學大綱</div>
</div>
<div class="p-price">￥12.60</div>
<div class="p-num">
<div class="quantity-form">
<a href=":;" 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="script:;" 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="jQuery實現全部購物車功能例項">
</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"&gwww.cppcns.comt;
<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="jQuery實現全部購物車功能例項">
</div>
<div class="p-msg">唐詩三百首+成語故事全2冊 一年級課外書 精裝注音兒童版 小學生二三年級課外閱讀書籍</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>
<!-- 結算模組 -->
<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">已經選<em>1</em>件商品</div>
<div class="price-sum">總價： <em>￥12.60</em></div>
<div class="btn-area">去結算</div>
</div>
</div>
</div>
</div>
</div>
以上所述是小編給大家介紹的jQuery實現全部購物車功能例項，希望對大家有所幫助。在此也非常感謝大家對我們的支援！