jQuery实现购物车完整功能,script+css完整代码+详细解释,可复制粘贴使用,更改图片及相关数据即可
这是一个使用 jQuery 实现的一个购物车功能的 JavaScript 脚本。
- 在文档加载完成后,通过
$()
函数获取页面元素并绑定事件处理函数。 - 当全选复选框
.checkAll
的状态改变时,将所有商品项的复选框状态设置为与全选复选框相同,并根据全选复选框的状态修改整个购物车的背景样式。 - 当商品项的复选框
.checkItem
状态改变时,根据选中的商品项数量修改全选复选框的状态,并修改对应商品项的背景样式。 - 点击增加按钮
.add
时,将该商品的购买数量加一,并根据新的购买数量计算并更新该商品的总金额,并调用getSum()
函数计算整个购物车的总金额。 - 点击减少按钮
.substract
时,将该商品的购买数量减一(如果数量已经为1,则不执行操作),并根据新的购买数量计算并更新该商品的总金额,并调用getSum()
函数计算整个购物车的总金额。 - 当手动输入购买数量时,将输入的值向上取整,并根据新的购买数量计算并更新该商品的总金额,并调用
getSum()
函数计算整个购物车的总金额。 getSum()
函数用于计算购物车的总件数和总金额。它遍历所有商品项的购买数量,并将数量累加到count
中,然后遍历所有商品项的总金额,并将金额累加到money
中,最后更新页面上显示总件数和总金额的元素。- 点击删除按钮
.del
时,移除该商品项,并调用getSum()
函数计算整个购物车的总金额。 - 点击删除选中商品按钮
.del_choice
时,移除所有选中的商品项,并调用getSum()
函数计算整个购物车的总金额。 - 点击清空购物车按钮
.delAll
时,移除所有商品项,并调用getSum()
函数计算整个购物车的总金额。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../JSFile/jQuery.min.js"></script> <style> * { margin: 0; padding: 0; } .bg{ background-color: aqua; } body { display: flex; flex-direction: column; align-items: center; } .commodity { width: 1400px; margin-top: 50px; } .commodity .head { display: flex; justify-content: space-between; align-items: center; background-color: lightgray; height: 50px; } .commodity .head>div { display: flex; } .commodity .head .right { width: 700px; text-align: center; } .commodity .head .left>div, .commodity .head .right>div { flex: 1; } .commodity .head .left { width: 300px; margin-left: 10px; } .commodity img { width: 150px; display: block; padding: 10px; border: 1px solid lightgray; border-radius: 5px; } .commodity .main { display: flex; justify-content: space-between; box-sizing: border-box; padding-top: 20px; /* background-color: aqua; */ height: 250px; margin-top: 20px; border-top: 4px solid #666666; } .commodity .main .left { display: flex; align-items: start; width: 550px; justify-content: space-between; } .commodity .main .left>div { margin-left: 10px; } .commodity .main .left .product { display: flex; margin-left: 50px; } .commodity .main .product p { margin-left: 20px; } .commodity .main .right { display: flex; width: 700px; } .commodity .main .right>div { flex: 1; display: flex; justify-content: center; } .commodity .main .right .count { display: flex; height: 30px; font-size: 16px; margin-top: -5px; } .commodity .main .right button { width: 20px; border: none; border: 1px solid black; background-color: white; cursor: pointer; font-size: 16px; } .commodity .main .right input { width: 60px; text-align: center; outline: none; border: none; border-top: 1px solid black; border-bottom: 1px solid black; } .commodity .main .right .del, .commodity .foot .left .del_choice, .commodity .foot .left .delAll { cursor: pointer; } .commodity .foot { font-size: 14px; background-color: #b0abab; margin-top: 10px; height: 40px; display: flex; justify-content: space-between; align-items: center; } .commodity .foot span { color: red; } .commodity .foot button { background-color: red; color: white; border: none; border: 1px solid red; height: 40px; width: 60px; font-weight: bold; } .commodity .foot>div { display: flex; } .commodity .foot .left { margin-left: 10px; } .commodity .foot .right { align-items: center; } .commodity .foot .right>div, .commodity .foot .left>div { margin-right: 20px; } .end { margin-bottom: 20px; } </style> </head> <body> <div class="commodity"> <div class="head"> <div class="left"> <div> <input type="checkbox" class="checkAll">全选 </div> <div>商品</div> </div> <div class="right"> <div>单价</div> <div>数量</div> <div>小计</div> <div>操作</div> </div> </div> <div class="main"> <div class="left"> <div> <input type="checkbox" class="checkItem"> </div> <div class="product"> <img src="../images/jd_2.webp" alt=""> <p>[5本268元]经典儿童文学彩图青少版八十天环游地球中学生语文数学大纲</p> </div> </div> <div class="right"> <div class="price">¥12.60</div> <div class="count"> <button class="substract">-</button> <input type="text" class="num" value="1"></input> <button class="add">+</button> </div> <div class="sum">¥12.60</div> <div class="del">删除</div> </div> </div> <div class="main"> <div class="left"> <div> <input type="checkbox" class="checkItem"> </div> <div class="product"> <img src="../images/jd_3.webp" alt=""> <p>[5本268元]经典儿童文学彩图青少版八十天环游地球中学生语文数学大纲</p> </div> </div> <div class="right"> <div class="price">¥25.60</div> <div class="count"> <button class="substract">-</button> <input type="text" class="num" value="1"></input> <button class="add">+</button> </div> <div class="sum">¥25.60</div> <div class="del">删除</div> </div> </div> <div class="main"> <div class="left"> <div> <input type="checkbox" class="checkItem"> </div> <div class="product"> <img src="../images/jd_4.webp" alt=""> <p>[5本268元]经典儿童文学彩图青少版八十天环游地球中学生语文数学大纲</p> </div> </div> <div class="right"> <div class="price">¥18.60</div> <div class="count"> <button class="substract">-</button> <input type="text" class="num" value="1"></input> <button class="add">+</button> </div> <div class="sum">¥18.60</div> <div class="del">删除</div> </div> </div> <div class="foot"> <div class="left"> <div> <input type="checkbox" class="checkAll">全选 </div> <div class="del_choice">删除选中的商品</div> <div class="delAll">清空购物车</div> </div> <div class="right"> <div>已经选<span class="sumNum">1</span>件商品</div> <div>总价:<span class="sumP">¥12.60</span></div> <button class="result">去结算</button> </div> </div> <div class="end"></div> </div> <script> $(function(){ $('.checkAll').change(function(){ var changeChecked=$(this).prop('checked') $('.checkItem,.checkAll').prop('checked',changeChecked) if($(this).prop('checked')){ $('.main').addClass('bg') }else{ $('.main').removeClass('bg') } }) $('.checkItem').change(function(){ if($(this).prop('checked')){ $(this).parents('.main').addClass('bg') }else{ $(this).parents('.main').removeClass('bg') } if($('.checkItem:checked').length==3){ $('.checkAll').prop('checked',true) }else{ $('.checkAll').prop('checked',false) } }) // 增加购买数 $('.add').click(function(){ var n = $(this).siblings('.num').val() n++ $(this).siblings('.num').val(n) var sum=$(this).parent().siblings('.sum') var pri=sum.siblings('.price').text() var p=pri.substr(1) var sumPri=(p*n).toFixed(2) sum.text('¥'+sumPri) getSum() }) // 减少购买数 $('.substract').click(function(){ var n = $(this).siblings('.num').val() if(n==1){ return false } n-- $(this).siblings('.num').val(n) var sum=$(this).parent().siblings('.sum') var pri=sum.siblings('.price').text() var p=pri.substr(1) var sumPri=(p*n).toFixed(2)/* toFixed(2)保留两位小数 */ sum.text('¥'+sumPri) getSum() }) // 手动输入购买数量 $('.num').change(function(){ // 输入值为非整数,向上取整 var n=Math.ceil($(this).val()) var sum=$(this).parent().siblings('.sum') var pri=sum.siblings('.price').text() var p=pri.substr(1) var sumPri=(p*n).toFixed(2) sum.text('¥'+sumPri) $(this).val(n) }) getSum() function getSum(){ var count=0 /* 计算总件数 */ var money=0 /* 计算总价钱 */ $('.num').each(function(i,ele){ count+=parseInt($(ele).val()) }) $('.sumNum').text(count) $('.sum').each(function(i,ele){ money+=parseFloat($(ele).text().substr(1)) }) $('.sumP').text('¥'+money.toFixed(2)) } // 删除商品 $('.del').click(function(){ $(this).parents('.main').remove() getSum() }) // 删除选中的商品 $('.del_choice').click(function(){ $('.checkItem:checked').parents('.main').remove() getSum() }) // 清空购物车 $('.delAll').click(function(){ $('.main').remove() getSum() }) }) </script> </body> </html>
复制