基于jQuery模擬實現(xiàn)淘寶購物車模塊
更新時間：2022年03月23日 08:50:06 作者：一夕ξ
這篇文章主要介紹了如何利用jQuery+css+html模擬實現(xiàn)淘寶購物車模塊，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起動手嘗試一下
這是網(wǎng)頁版淘寶中購物車的頁面
注意給checkbox添加事件就是用change()
給button添加事件就是用click（）
1、每次點擊+號，根據(jù)文本框的值乘以當(dāng)前商品的價格就是商品的小計
2、只能增加本商品的小計，就是當(dāng)前商品的小計模塊
3、修改普通元素的內(nèi)容是text方法
4、當(dāng)前商品的價格要把￥符號去掉再相乘 截取字符串substr（）
5、parents（‘選擇器’）可以返回指定祖先元素4
6、最后計算的結(jié)果如果想要保留兩位小數(shù)通過toFixed(2)方法
7、用戶也可以直接修改表單里面的值，同樣要計算小計，用表單change事件
8、用最新的表單內(nèi)容的值乘以單價即可，但還是當(dāng)前商品的小計
計算總計和總額：
思路：把所有文本框里面的值相加就是總計數(shù)量，總額同理
文本框里面的值不相同，如果想要相加就需要用到each的遍歷，聲明一個變量，相加即可
點擊+號或者-號，都會改變總計和總額，如果用戶修改了文本框里面的值也會改變總額，那么都要分別添加到這三個事件中，因此封裝一個函數(shù)來求總額和總計，以上幾個操作調(diào)用即可
注意：總計是文本框中的值相加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">小計</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è)計感小眾日系甜酷學(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è)計感小眾寬松慵懶風(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)為選中。點擊全選按鈕讓其不選中時，商品的選中狀態(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('')
//是在初始值上每點擊一次就減一,但最小為一
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)
//更改小計里面的內(nèi)容,顯示兩個小數(shù).toFixed(2)
$(this).parent().siblings('.totalmony').text('￥' + (c * (parseInt(b) + 1)).toFixed(2))
totalnumber()
})
$('.jian').click(function() {
//這個商品的價格改變,siblings('')
//是在初始值上每點擊一次就減一,但最小為一
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)
//更改小計里面的內(nèi)容,顯示兩個小數(shù).toFixed(2)
$(this).parent().siblings('.totalmony').text('￥' + (c * (a - 1)).toFixed(2))
}
totalnumber()
})
//4、實現(xiàn)小計跟隨數(shù)量變化，用數(shù)量的值*單價。單價去掉￥，得到數(shù)字,因為是跟隨數(shù)量變化的，所以這一部分添加到點擊事件中去,substr()
//5、手動更改數(shù)量的時候，小計會發(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時，默認為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)變化的事件中進行更改--不對，商品數(shù)目拿的是表單里面的數(shù)量綜合，一旦表單里面的元素值發(fā)生改變的時候，就要重新計算以下商品的數(shù)目
//7、更改價格，價格的話就是小計的累加。那么就需要對小計進行遍歷，一旦小計發(fā)生改變，就需要遍歷一次去改變總價
//函數(shù)封裝
//總計
function totalnumber() {
var ton = 0
$('.mony').each(function(index, ele) {
// console.log(index);
// console.log($('.mony').eq(index).val());直接拿ele這個元素里面的內(nèi)容，不需要進行索引
ton = ton + parseInt($(ele).val())
})
$('.totoalgoodn').text('已經(jīng)選' + ton + '件商品')
//總額,從小計里面獲得，去掉￥，再遍歷相加
var mon = 0
$('.totalmony').each(function(i, e) {
//首先獲取每個元素的text
mon = mon + parseInt($(e).text().substr(1))
})
//把mon給總價后的數(shù)值
$('.totalprice').text('￥' + mon.toFixed(2))
}
totalnumber()//打開這個頁面，有默認的值存在，所以也要調(diào)用一次
})
</script>
</body>
</html>到此這篇關(guān)于基于jQuery模擬實現(xiàn)淘寶購物車模塊的文章就介紹到這了,更多相關(guān)jQuery淘寶購物車內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用jquery實現(xiàn)的文字向上滾動效果多的不計其數(shù)吧，間歇向上滾動卻不是那么的多，所以本文簡單的實現(xiàn)了一個，感興趣的朋友可以參考下哈2013-06-06
這篇文章主要為大家介紹了如何利用JQuery實現(xiàn)相鄰item焦點移動的效果，文中的示例代碼講解詳細，對我們學(xué)習(xí)前端知識有一定的幫助，感興趣的可以學(xué)習(xí)一下2022-04-04
無論是window.setTimeout還是window.setInterval，在使用函數(shù)名作為調(diào)用句柄時都不能帶參數(shù)，解決辦法是在此函數(shù)的基礎(chǔ)上在做一層封裝2013-05-05
前幾天在做項目的時候 遇到個小問題，就是分頁結(jié)果的頁數(shù)太多一般5頁到10頁就結(jié)束了可是這個分頁結(jié)果有400多頁的當(dāng)時就有些抓狂了，后來想了想模仿搜索引擎的結(jié)果頁面2012-04-04
這篇文章主要介紹了jQuery獲取動態(tài)添加元素的方法詳解,jQuery 是一個高效、精簡并且功能豐富的 JavaScript 工具庫,它提供的 API 易于使用且兼容眾多瀏覽器，這讓諸如 HTML 文檔遍歷和操作、事件處理、動畫和 Ajax 操作更加簡單,需要的朋友可以參考下2023-08-08
本篇文章主要是對jquery easyui中treegrid用法的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
頁面上經(jīng)常會有彈窗，有的彈窗是動態(tài)生成的，有的彈窗是在頁面底部隱藏的，對于動態(tài)生成的彈窗，如果要監(jiān)聽彈窗的事件，可以使用jQuery的事件綁定on()方法實現(xiàn)2016-04-04
基于jquery的從一個頁面跳轉(zhuǎn)到另一個頁面的指定位置的實現(xiàn)代碼（帶平滑移動的效果）
從一個頁面跳轉(zhuǎn)到另一個頁面的指定位置 如果不帶平滑移動的效果 很容易 加個 錨點就行了2011-05-05
基于jQuery架構(gòu)javascript基礎(chǔ)體系
jQuery畢竟還只是一個基礎(chǔ)的最底層的工具集，封裝元素選擇器，事件等等，基本上能滿足一般的需求，但要從整體的WEB的周度來看，為了提高javascript開發(fā)的效率與可重用性，就需要有一個整體的布局2011-01-01
這篇文章主要介紹了jquery實現(xiàn)選中單選按鈕下拉伸縮效果的方法,涉及jquery鼠標(biāo)事件及頁面元素樣式的動態(tài)操作技巧,該功能可用于動態(tài)顯示特定內(nèi)容(如發(fā)票打印等),需要的朋友可以參考下2015-08-08