基于jQuery模擬實(shí)現(xiàn)淘寶購物車模塊
更新時間：2022年03月23日 08:50:06 作者：一夕ξ
這篇文章主要介紹了如何利用jQuery+css+html模擬實(shí)現(xiàn)淘寶購物車模塊，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起動手嘗試一下
這是網(wǎng)頁版淘寶中購物車的頁面
注意給checkbox添加事件就是用change()
給button添加事件就是用click（）
1、每次點(diǎn)擊+號，根據(jù)文本框的值乘以當(dāng)前商品的價格就是商品的小計(jì)
2、只能增加本商品的小計(jì)，就是當(dāng)前商品的小計(jì)模塊
3、修改普通元素的內(nèi)容是text方法
4、當(dāng)前商品的價格要把￥符號去掉再相乘 截取字符串substr（）
5、parents（‘選擇器’）可以返回指定祖先元素4
6、最后計(jì)算的結(jié)果如果想要保留兩位小數(shù)通過toFixed(2)方法
7、用戶也可以直接修改表單里面的值，同樣要計(jì)算小計(jì)，用表單change事件
8、用最新的表單內(nèi)容的值乘以單價即可，但還是當(dāng)前商品的小計(jì)
計(jì)算總計(jì)和總額：
思路：把所有文本框里面的值相加就是總計(jì)數(shù)量，總額同理
文本框里面的值不相同，如果想要相加就需要用到each的遍歷，聲明一個變量，相加即可
點(diǎn)擊+號或者-號，都會改變總計(jì)和總額，如果用戶修改了文本框里面的值也會改變總額，那么都要分別添加到這三個事件中，因此封裝一個函數(shù)來求總額和總計(jì)，以上幾個操作調(diào)用即可
注意：總計(jì)是文本框中的值相加val（）?？傤~是普通元素的內(nèi)容text（）
注意普通元素里面的內(nèi)容要去掉￥并且轉(zhuǎn)為數(shù)字型后才能相加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 80px;
height: 80px
}
a {
color: black;
text-decoration: none;
}
.mony {
width: 20px;
text-align: center;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div>全部商品</div>
<!-- 一個表單元素 -->
<form action="">
<table style="border-collapse: 0px;border-spacing: 0px;width:872px">
<tr style="background-color:grey;">
<td><input type="checkbox" class="choseall">全選</td>
<td style="width:500px;height:40px">商品</td>
<td>單價</td>
<td style="width:100px">數(shù)量</td>
<td style="width:100px">小計(jì)</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox" class="goodchose"></td>
<td>
<div>
<div style="float:left">
<a href="">
<img src="https://img.alicdn.com/bao/uploaded/i2/2904754564/O1CN011Q0OER1jaMJXxFeHl_!!2904754564.jpg_240x240.jpg" alt="">
</a>
</div>
<div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >【新勢力周】YUKI小樹家可愛趣味印花短款白T恤+卡扣高腰寬松復(fù)古闊腿牛仔長褲</a>
</div>
</div>
</td>
<td class="onemony">￥37.00</td>
<td>
<input type="button" value="-" class="jian"><input type="text" class="mony" value="1"><input type="button" value="+" class="add">
</td>
<td class="totalmony">￥37.00</td>
<td>刪除</td>
</tr>
<tr>
<td><input type="checkbox" class="goodchose"></td>
<td>
<div>
<div style="float:left">
<a href="">
<img src="https://img.alicdn.com/bao/uploaded/i1/3606826698/O1CN01NPCasY1zLjTBGmAax_!!3606826698.jpg_240x240.jpg" alt="">
</a>
</div>
<div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >日系正肩短袖t恤女夏薄款設(shè)計(jì)感小眾日系甜酷學(xué)生小個子寬松上衣</a>
</div>
</div>
</td>
<td class="onemony">￥49.90</td>
<td>
<input type="button" value="-" class="jian"><input type="text" class="mony" value="1"><input type="button" value="+" class="add">
</td>
<td class="totalmony">￥49.90</td>
<td>刪除</td>
</tr>
<tr>
<td><input type="checkbox" class="goodchose"></td>
<td>
<div>
<div style="float:left">
<a href="">
<img src="https://img.alicdn.com/bao/uploaded/i3/3606826698/O1CN01jfI3hB1zLjZhqP5rC_!!3606826698.jpg_240x240.jpg" alt="">
</a>
</div>
<div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >春秋格子襯衫外套女2022新款小個子設(shè)計(jì)感小眾寬松慵懶風(fēng)日系上衣</a>
</div>
</div>
</td>
<td class="onemony">￥69.90</td>
<td>
<input type="button" value="-" class="jian"><input type="text" class="mony" value="1"><input type="button" value="+" class="add">
</td>
<td class="totalmony">￥69.90</td>
<td>刪除</td>
</tr>
<tr>
<td><input type="checkbox" class="goodchose"></td>
<td>
<div>
<div style="float:left">
<a href="">
<img src="https://img.alicdn.com/bao/uploaded/i2/628189716/O1CN01mpRMR22Ldyv4OgUtt_!!0-item_pic.jpg_80x80.jpg" alt="">
</a>
</div>
<div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >滿減【百草味-紅油面皮134g】方便面盒裝速食涼皮拌泡面米粉涼皮</a>
</div>
</div>
</td>
<td class="onemony">￥23.70</td>
<td>
<input type="button" value="-" class="jian"><input type="text" class="mony" value="1"><input type="button" value="+" class="add">
</td>
<td class="totalmony">￥23.70</td>
<td>刪除</td>
</tr>
</table>
<div style="position:fixed;bottom:0px;width:872px;background-color:rgb(184, 177, 177);height:50px;line-height: 50px;">
<input type="checkbox" class="chosealllast">全選<span style="position:absolute;right:230px;" class="totoalgoodn">已經(jīng)選0件商品</span><span style="position:absolute;right:150px;">總價：</span>
<span style="position:absolute;left:715px;color:red;font-weight: bold;" class="totalprice">￥12.60</span>
</div>
</form>
<script>
$(function() {
//1、全選按鈕。上下的全選按鈕效果是一樣的，按鈕狀態(tài)選中，那么所有商品的狀態(tài)為選中。點(diǎn)擊全選按鈕讓其不選中時，商品的選中狀態(tài)就全部取消choseall與goodchose
$('.choseall').change(function() {
//讓下面商品的選中狀態(tài)與全選按鈕的一致$('.choseall').prop(checked)
$('.goodchose').prop('checked', $('.choseall').prop('checked'))
$('.chosealllast').prop('checked', $('.choseall').prop('checked'))
// //全選按鈕按下，那么商品總數(shù)就等于goodchose的數(shù)量
// if ($('.choseall').prop('checked') == true) {
// $('.totoalgoodn').text('已經(jīng)選' + $('.goodchose').length + '件商品')
// }
// //取消全選數(shù)目就等于0
// if ($('.choseall').prop('checked') == false) {
// $('.totoalgoodn').text('已經(jīng)選' + 0 + '件商品')
// }
//復(fù)制一份到下面的全選按鈕中
})
$('.chosealllast').change(function() {
//讓下面商品的選中狀態(tài)與全選按鈕的一致$('.choseall').prop(checked)
$('.goodchose').prop('checked', $('.chosealllast').prop('checked'))
$('.choseall').prop('checked', $('.chosealllast').prop('checked'))
// if ($('.choseall').prop('checked') == true) {
// $('.totoalgoodn').text('已經(jīng)選' + $('.goodchose').length + '件商品')
// }
// //取消全選數(shù)目就等于0
// if ($('.choseall').prop('checked') == false) {
// $('.totoalgoodn').text('已經(jīng)選' + 0 + '件商品')
// }
})
//2、當(dāng)商品的選中個數(shù)小于商品欄個數(shù)的時候，兩個全選按鈕就會取消選中element：checked 用來專門獲取復(fù)選框被選中的情況.length獲取個數(shù)
$('.goodchose').change(function() {
// console.log($('.goodchose:checked'))
if ($('.goodchose:checked').length != $('.goodchose').length) {
$('.choseall').prop('checked', false)
$('.chosealllast').prop('checked', false)
}
//當(dāng)商品的選中個數(shù)等于商品個數(shù)的時候，就相當(dāng)于全選了，此時兩個全選復(fù)選框全部選中
if ($('.goodchose:checked').length == $('.goodchose').length) {
$('.choseall').prop('checked', true)
$('.chosealllast').prop('checked', true)
}
// //6、更改商品總數(shù)內(nèi)容
// $('.totoalgoodn').text('已經(jīng)選' + $('.goodchose:checked').length + '件商品')
// console.log($('.goodchose:checked').length);
})
//3、修改數(shù)量為jian和add添加事件
$('.add').click(function() {
//這個商品的價格改變,siblings('')
//是在初始值上每點(diǎn)擊一次就減一,但最小為一
var b = $(this).siblings('.mony').prop('value')
//這個b是一個字符型
$(this).siblings('.mony').prop('value', parseInt(b) + 1)
//4|
var c = $(this).parent().siblings('.onemony').text().substr(1)
// console.log(c)
//更改小計(jì)里面的內(nèi)容,顯示兩個小數(shù).toFixed(2)
$(this).parent().siblings('.totalmony').text('￥' + (c * (parseInt(b) + 1)).toFixed(2))
totalnumber()
})
$('.jian').click(function() {
//這個商品的價格改變,siblings('')
//是在初始值上每點(diǎn)擊一次就減一,但最小為一
var a = parseInt($(this).siblings('.mony').prop('value'))
if (a >= 2) {
$(this).siblings('.mony').prop('value', a - 1)
//4|
var c = $(this).parent().siblings('.onemony').text().substr(1)
// console.log(c)
//更改小計(jì)里面的內(nèi)容,顯示兩個小數(shù).toFixed(2)
$(this).parent().siblings('.totalmony').text('￥' + (c * (a - 1)).toFixed(2))
}
totalnumber()
})
//4、實(shí)現(xiàn)小計(jì)跟隨數(shù)量變化，用數(shù)量的值*單價。單價去掉￥，得到數(shù)字,因?yàn)槭歉S數(shù)量變化的，所以這一部分添加到點(diǎn)擊事件中去,substr()
//5、手動更改數(shù)量的時候，小計(jì)會發(fā)生改變.給mony添加change事件
$('.mony').change(function() {
//獲得這里面的值賦值給一個變量
var number = $(this).prop('value')
//獲取對應(yīng)的單價
var c = $(this).parent().siblings('.onemony').text().substr(1)
//要保證合格值大于等于1
if (number >= 1) {
var b = number * c
}
//當(dāng)number小于1時，默認(rèn)為1
if (number < 1) {
$(this).prop('value', 1)
number = 1
var b = number * c
}
// alert(number)
// console.log(number)
console.log(b)
$(this).parent().siblings('.totalmony').text('￥' + (b).toFixed(2))
totalnumber()
})
//6、獲得已經(jīng)選擇的商品個數(shù)，就是看商品欄的狀態(tài)選擇個數(shù),再狀態(tài)變化的事件中進(jìn)行更改--不對，商品數(shù)目拿的是表單里面的數(shù)量綜合，一旦表單里面的元素值發(fā)生改變的時候，就要重新計(jì)算以下商品的數(shù)目
//7、更改價格，價格的話就是小計(jì)的累加。那么就需要對小計(jì)進(jìn)行遍歷，一旦小計(jì)發(fā)生改變，就需要遍歷一次去改變總價
//函數(shù)封裝
//總計(jì)
function totalnumber() {
var ton = 0
$('.mony').each(function(index, ele) {
// console.log(index);
// console.log($('.mony').eq(index).val());直接拿ele這個元素里面的內(nèi)容，不需要進(jìn)行索引
ton = ton + parseInt($(ele).val())
})
$('.totoalgoodn').text('已經(jīng)選' + ton + '件商品')
//總額,從小計(jì)里面獲得，去掉￥，再遍歷相加
var mon = 0
$('.totalmony').each(function(i, e) {
//首先獲取每個元素的text
mon = mon + parseInt($(e).text().substr(1))
})
//把mon給總價后的數(shù)值
$('.totalprice').text('￥' + mon.toFixed(2))
}
totalnumber()//打開這個頁面，有默認(rèn)的值存在，所以也要調(diào)用一次
})
</script>
</body>
</html>到此這篇關(guān)于基于jQuery模擬實(shí)現(xiàn)淘寶購物車模塊的文章就介紹到這了,更多相關(guān)jQuery淘寶購物車內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介為大家詳細(xì)紹了jquery小火箭返回頂部特效，當(dāng)用戶瀏覽到網(wǎng)頁的最下端時，點(diǎn)擊右下角的火箭可以返回到頁面最頂部，滾動效果平滑，有需要的小伙伴可以參考下。2015-08-08
jquery購物車實(shí)時結(jié)算特效實(shí)現(xiàn)思路
購物車是可以實(shí)時結(jié)算，下面為大家解釋下通過jquery是如何實(shí)現(xiàn)的，感興趣的朋友可以了解下2013-09-09
jQuery Ajax File Upload實(shí)例源碼
這篇文章主要為大家分享了jQuery Ajax File Upload實(shí)例源碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了幫助你創(chuàng)建更好的jQuery插件的10條建議,涉及jQuery插件設(shè)計(jì)中常用的技巧,需要的朋友可以參考下2015-05-05
jQuery 是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，同時還有許多成熟的插件可供選擇，它可以幫助你在項(xiàng)目中加入一些非常好的效果2012-01-01
這篇文章主要介紹了jQuery獲取樣式中顏色值的方法,可實(shí)現(xiàn)針對IE與Chrome、Firefox等不同瀏覽器都可獲取css樣式中background-color值的功能,非常具有實(shí)用價值,需要的朋友可以參考下2015-01-01
jquery實(shí)現(xiàn)的table排序功能示例
這篇文章主要介紹了jquery實(shí)現(xiàn)的table排序功能,涉及基于jQuery的頁面元素屬性動態(tài)操作及鼠標(biāo)事件響應(yīng)相關(guān)技巧,需要的朋友可以參考下2017-03-03
jQuery事件綁定on()、bind()與delegate() 方法詳解
這篇文章主要詳細(xì)介紹了jQuery事件綁定的三種方法，分別是on()、bind()與delegate()，十分的淺顯易懂，有需要的小伙伴可以參考下。2015-06-06
jquery dataTable 后臺加載數(shù)據(jù)并分頁實(shí)例代碼
本篇文章主要介紹了jquery dataTable 后臺加載數(shù)據(jù)并分頁實(shí)例代碼，具有一定的參考價值，有興趣的可以了解一下2017-06-06
jquery超簡單實(shí)現(xiàn)手風(fēng)琴效果的方法
這篇文章主要介紹了jquery超簡單實(shí)現(xiàn)手風(fēng)琴效果的方法,只需要幾行代碼即可實(shí)現(xiàn)手風(fēng)琴效果的樣式變換功能,需要的朋友可以參考下2015-06-06