jQuery實現(xiàn)PC端商城購物車模塊基本功能
先上效果圖：
因為主要是想練習(xí)jQuery的使用，所以頁面CSS部分比較簡陋，有需要的話，大家在參考代碼時，可以自己再完善下CSS部分的代碼，讓購物車頁面更加美觀。
功能清單如下：
1.全選非全選商品
2.一鍵刪除選中商品
3.一鍵清空購物車
4.根據(jù)添加和刪除動態(tài)計算已選中的商品總數(shù)和總價格，并渲染到頁面中
5.點擊加減單個商品的數(shù)量，鍵盤輸入改變單個商品的數(shù)量
<!DOCTYPE html
>
<html
><head
><meta charset
="utf-8"><title
>購物車商品數(shù)量增減
</title
><style type
="text/css">a
{text
-decoration
: none
;}.itxt
{width
: 50px
;text
-align
: center
;}.clearfix
{content
: "";visibility
: none
;display
: block
;clear
: both
;}.goods
{box
-sizing
: border
-box
;height
: 100px
;border
: 1px solid black
;padding
: 25px
;}.g_name
{width
: 10%;float
: left
;}.left
,.right
,.number
{float
: left
;}.left
{width
: 20%;white
-space
: nowrap
;}.number
{width
: 30%;text
-align
: center
;}.right
{width
: 30%;white
-space
: nowrap
;text
-align
: left
;}.delete {text
-align
: right
;display
: inline
-block
;width
: 70px
;}.goods_check
{float
: left
;height
: 20px
;}.check_cart_item
{background
-color
: #fff4e8
;}</style
><script src
="js/jquery-3.5.0.js"></script
><script type
="text/javascript">$(function() {console
.log($('.price'));$('.decrease').click(function() {var curVal
= $(this).siblings('.itxt').val();if (curVal
>= 2) {curVal
-= 1;$(this).siblings('.itxt').val(curVal
);}var price
= $(this).parent().siblings('.left').children('.price').html();price
= price
.substr(1); var sum
= "￥" + (curVal
* price
).toFixed(2); $(this).parent().siblings('.right').children('.sum').html(sum
);getSum();})$('.increase').click(function() {var curVal
= $(this).siblings('.itxt').val();curVal
= parseInt(curVal
);curVal
+= 1;$(this).siblings('.itxt').val(curVal
);var price
= $(this).parent().siblings('.left').children('.price').html();price
= price
.substr(1); var sum
= (curVal
* price
).toFixed(2); sum
= "￥" + sum
;$(this).parent().siblings('.right').children('.sum').html(sum
);getSum();})$('.itxt').change(function() {var price
= $(this).parent().siblings('.left').children('.price').html();price
= price
.substr(1); var sum
= $(this).val() * price
;sum
= "￥" + sum
.toFixed(2);$(this).parent().siblings('.right').children('.sum').html(sum
);getSum();})renew(); getSum(); function getSum() {var count
= 0; var money
= 0; $('.itxt').each(function(i
, ele
) {count
+= parseInt($(ele
).val());})$('.sumNum em').html(count
);$('.sum').each(function(i
, ele
) {money
+= parseFloat($(ele
).html().substr(1));})$('.sumPrice em').html(money
.toFixed(2));}function renew() {var array_price
= [];for (var i
= 0; i
< $('.goods').length
; i
++) {console
.log(parseFloat($('.price')[i
].innerHTML
.substr(1)).toFixed(2));array_price
.push(parseFloat($('.price')[i
].innerHTML
.substr(1)).toFixed(2));}console
.log(array_price
);$('.sum').each(function(i
, ele
) {$(ele
).html('￥' + array_price
[i
]);})}$('.delete').click(function() {$(this).parents('.goods').remove();getSum();})$('.removes').click(function() {$('.goods_check:checked').parents('.goods').remove();getSum();})$('.remove_cart').click(function() {$('.goods').remove();getSum();})$('.checkAll').change(function() {$('.goods_check,.checkAll').prop("checked", $(this).prop("checked")) if($('.goods_check,.checkAll').prop("checked")) {$('.goods').addClass('check_cart_item');}else {$('.goods').removeClass('check_cart_item');}})$('.goods_check').change(function() {if($(this).prop('checked')){$(this).parents('.goods').addClass('check_cart_item');}else {$(this).parents('.goods').removeClass('check_cart_item');}if ($(".goods_check:checked").length
=== $('.goods_check').length
) {$('.checkAll').prop("checked", true)} else {$('.checkAll').prop("checked", false)}})})</script
></head
><body
>全選
<input type
="checkbox" name
="" id
="" value
="全選1" class="checkAll" /><div
class="goods clearfix"><input type
="checkbox" name
="" id
="" value
="商品1" class="goods_check" /><span
class="g_name">商品
1</span
><div
class="left"><span
>單價
:</span
><span
class="price">￥
12.6</span
></div
><div
class="number"><a href
="#" class="decrease">-</a
><input type
="text" value
="1" class="itxt" /><a href
="#" class="increase">+</a
></div
><div
class="right"><span
>小計
:</span
><span
class="sum">￥
0.00</span
><span
class="delete"><a href
="#">刪除
</a
></span
></div
></div
><div
class="goods clearfix"><input type
="checkbox" name
="" id
="" value
="商品1" class="goods_check" /><span
class="g_name">商品
2</span
><div
class="left"><span
>單價
:</span
><span
class="price">￥
102.9</span
></div
><div
class="number"><a href
="#" class="decrease">-</a
><input type
="text" value
="1" class="itxt" /><a href
="#" class="increase">+</a
></div
><div
class="right"><span
>小計
:</span
><span
class="sum">￥
0.00</span
><span
class="delete"><a href
="#">刪除
</a
></span
></div
></div
><div
class="goods clearfix"><input type
="checkbox" name
="" id
="" value
="商品1" class="goods_check" /><span
class="g_name">商品
3</span
><div
class="left"><span
>單價
:</span
><span
class="price">￥
19.9</span
></div
><div
class="number"><a href
="#" class="decrease">-</a
><input type
="text" value
="1" class="itxt" /><a href
="#" class="increase">+</a
></div
><div
class="right"><span
>小計
:</span
><span
class="sum">￥
0.00</span
><span
class="delete"><a href
="#">刪除
</a
></span
></div
></div
><div
class="goods clearfix"><input type
="checkbox" name
="" id
="" value
="商品1" class="goods_check" /><span
class="g_name">商品
4</span
><div
class="left"><span
>單價
</span
><span
class="price">￥
358.9</span
></div
><div
class="number"><a href
="#" class="decrease">-</a
><input type
="text" value
="1" class="itxt" /><a href
="#" class="increase">+</a
></div
><div
class="right"><span
>小計
:</span
><span
class="sum">￥
0.00</span
><span
class="delete"><a href
="#">刪除
</a
></span
></div
></div
><div
class="bottom">全選
<input type
="checkbox" name
="" id
="" value
="全選1" class="checkAll" /><span
><a href
="#" class="removes">刪除選中的商品
</a
></span
><span
><a href
="#" class="remove_cart">清空購物車
</a
></span
><div
class="sumNum">已經(jīng)選中
<em
>1</em
>件商品
</div
><div
class="sumPrice">總計：
<em
>0.00</em
>元
</div
></div
></body
>
</html
>
總結(jié)
以上是生活随笔為你收集整理的jQuery实现PC端商城购物车模块基本功能（每个商品的小计和合计都会根据添加和删除的操作来动态计算）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
