當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery 属性操作——案例：购物车案例模块

發布時間：2025/4/16 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery 属性操作——案例：购物车案例模块小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

案例：購物車案例模塊-全選

<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><title>我的購物車-品優購</title><meta name="description"content="品優購JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!" /><meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,品優購" /><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/car.css"><script src="js/jquery.min.js"></script><script src="js/car.js"></script> </head><body><div class="shortcut"><div class="w"><div class="fl"><ul><li>品優購歡迎您！ </li><li><a href="#">請登錄</a><a href="#" class="style-red">免費注冊</a></li></ul></div><div class="fr"><ul><li><a href="#">我的訂單</a></li><li class="spacer"></li><li><a href="#">我的品優購</a><i class="icomoon">?</i></li><li class="spacer"></li><li><a href="#">品優購會員</a></li><li class="spacer"></li><li><a href="#">企業采購</a></li><li class="spacer"></li><li><a href="#">關注品優購</a> <i class="icomoon">?</i></li><li class="spacer"></li><li><a href="#">客戶服務</a> <i class="icomoon">?</i></li><li class="spacer"></li><li><a href="#">網站導航</a> <i class="icomoon">?</i></li></ul></div></div></div><div class="car-header"><div class="w"><div class="car-logo"><img src="img/logo.png" alt=""> <b>購物車</b></div></div></div></div><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="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div></div><div class="p-sum">￥12.60</div><div class="p-action"><a href="javascript:;">刪除</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冊貼畫貼紙兒童汽</div></div><div class="p-price">￥24.80</div><div class="p-num"><div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div></div><div class="p-sum">￥24.80</div><div class="p-action"><a href="javascript:;">刪除</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冊一年級課外書精裝注音兒童版小學生二三年級課外閱讀書籍</div></div><div class="p-price">￥29.80</div><div class="p-num"><div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div></div><div class="p-sum">￥29.80</div><div class="p-action"><a href="javascript:;">刪除</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:;" class="remove-batch"> 刪除選中的商品</a><a href="javascript:;" 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><div class="footer"><div class="w"><div class="mod_service"><ul><li><i class="mod-service-icon mod_service_zheng"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供發票</p></div></li><li><i class="mod-service-icon mod_service_kuai"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供發票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供發票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供發票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供發票</p></div></li></ul></div><div class="mod_help"><dl class="mod_help_item"><dt>購物指南</dt><dd> <a href="#">購物流程 </a></dd><dd> <a href="#">會員介紹 </a></dd><dd> <a href="#">生活旅行/團購 </a></dd><dd> <a href="#">常見問題 </a></dd><dd> <a href="#">大家電 </a></dd><dd> <a href="#">聯系客服 </a></dd></dl><dl class="mod_help_item"><dt>購物指南</dt><dd> <a href="#">購物流程 </a></dd><dd> <a href="#">會員介紹 </a></dd><dd> <a href="#">生活旅行/團購 </a></dd><dd> <a href="#">常見問題 </a></dd><dd> <a href="#">大家電 </a></dd><dd> <a href="#">聯系客服 </a></dd></dl><dl class="mod_help_item"><dt>購物指南</dt><dd> <a href="#">購物流程 </a></dd><dd> <a href="#">會員介紹 </a></dd><dd> <a href="#">生活旅行/團購 </a></dd><dd> <a href="#">常見問題 </a></dd><dd> <a href="#">大家電 </a></dd><dd> <a href="#">聯系客服 </a></dd></dl><dl class="mod_help_item"><dt>購物指南</dt><dd> <a href="#">購物流程 </a></dd><dd> <a href="#">會員介紹 </a></dd><dd> <a href="#">生活旅行/團購 </a></dd><dd> <a href="#">常見問題 </a></dd><dd> <a href="#">大家電 </a></dd><dd> <a href="#">聯系客服 </a></dd></dl><dl class="mod_help_item"><dt>購物指南</dt><dd> <a href="#">購物流程 </a></dd><dd> <a href="#">會員介紹 </a></dd><dd> <a href="#">生活旅行/團購 </a></dd><dd> <a href="#">常見問題 </a></dd><dd> <a href="#">大家電 </a></dd><dd> <a href="#">聯系客服 </a></dd></dl><dl class="mod_help_item mod_help_app"><dt>幫助中心</dt><dd><img src="upload/erweima.png" alt=""><p>品優購客戶端</p></dd></dl></div><div class="mod_copyright"><p class="mod_copyright_links">關于我們 | 聯系我們 | 聯系客服 | 商家入駐 | 營銷中心 | 手機品優購 | 友情鏈接 | 銷售聯盟 | 品優購社區 | 品優購公益 | English Site | Contact U</p><p class="mod_copyright_info">地址：北京市昌平區建材城西路金燕龍辦公樓一層郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn <br>京ICP備08001421號京公網安備110108007702</p></div></div></div> </body></html>

car.js

$(function () {// 1. 全選全不選功能模塊// 就是把全選按鈕（checkall）的狀態賦值給三個小的按鈕（j-checkbox）就可以了// 事件可以使用change$('.checkall').change(function () {// console.log($(this).prop("checked"));$('.j-checkbox, .checkall').prop('checked', $(this).prop('checked'))if ($(this).prop('checked')) {// 讓所有的商品添加 check-cart-item 類名$('.cart-item').addClass('check-cart-item')} else {// check-cart-item 移除$('.cart-item').removeClass('check-cart-item')}})// 2. 如果小復選框被選中的個數等于3 就應該把全選按鈕選上，否則全選按鈕不選。$('.j-checkbox').change(function () {// if(被選中的小的復選框的個數 === 3) {// 就要選中全選按鈕// } else {// 不要選中全選按鈕// }// console.log($(".j-checkbox:checked").length);// $(".j-checkbox").length 這個是所有的小復選框的個數if ($('.j-checkbox:checked').length === $('.j-checkbox').length) {$('.checkall').prop('checked', true)} else {$('.checkall').prop('checked', false)}if ($(this).prop('checked')) {// 讓當前的商品添加 check-cart-item 類名$(this).parents('.cart-item').addClass('check-cart-item')} else {// check-cart-item 移除$(this).parents('.cart-item').removeClass('check-cart-item')}})// 3. 增減商品數量模塊首先聲明一個變量，當我們點擊+號（increment），就讓這個值++，然后賦值給文本框。$('.increment').click(function () {// 得到當前兄弟文本框的值var n = $(this).siblings('.itxt').val()n++$(this).siblings('.itxt').val(n)// 3. 計算小計模塊根據文本框的值乘以當前商品的價格就是商品的小計// 當前商品的價格 pvar p = $(this).parents('.p-num').siblings('.p-price').html()p = p.substr(1)var price = (p * n).toFixed(2)// 小計模塊// toFixed(2) 可以讓我們保留2位小數$(this).parents('.p-num').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).parent().parent().siblings(".p-price").html();// parents(".p-num") 返回指定的祖先元素var p = $(this).parents('.p-num').siblings('.p-price').html()p = p.substr(1)// 小計模塊$(this).parents('.p-num').siblings('.p-sum').html('￥' + (p * n).toFixed(2))getSum()})// 4. 用戶修改文本框的值計算小計模塊$('.itxt').change(function () {// 先得到文本框的里面的值乘以當前商品的單價var n = $(this).val()// 當前商品的單價var p = $(this).parents('.p-num').siblings('.p-price').html()// console.log(p);p = p.substr(1)$(this).parents('.p-num').siblings('.p-sum').html('￥' + (p * n).toFixed(2))getSum()})// 5. 計算總計和總額模塊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))}// 6. 刪除商品模塊// (1) 商品后面的刪除按鈕$('.p-action a').click(function () {// 刪除的是當前的商品$(this).parents('.cart-item').remove()getSum()})// (2) 刪除選中的商品$('.remove-batch').click(function () {// 刪除的是小的復選框選中的商品$('.j-checkbox:checked').parents('.cart-item').remove()getSum()})// (3) 清空購物車刪除全部商品$('.clear-all').click(function () {$('.cart-item').remove()getSum()}) })

小案例demo的代碼

鏈接：https://pan.baidu.com/s/1q8GDMIFrdR-z3oFGlJiDQA?
提取碼：ao40?

總結

以上是生活随笔為你收集整理的jQuery 属性操作——案例：购物车案例模块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： jQuery 元素操作——遍历元素
下一篇：索引的最左前缀原理