https://www.cnblogs.com/sandraryan/
jq实现购物车功能
点击+- 增减数量,计算价格;
点击删除,删除当前行(商品)
点击- ,减到0 询问是否删除商品
点击全选 计算总价(商品只有被选中才能计算总价)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div, ul, li { margin: 0; padding: 0; } #wrap { width: 782px; box-shadow: 0 0 10px lightblue; margin: 100px auto; text-align: center; } li { font-size: 20px; color: gray; width: 100px; height: 24px; line-height: 30px; list-style: none; border: 1px solid lightgray; float: left; padding: 10px; } ul { height: 46px; display: block; margin: 0 auto; clear: both; background-color: rgb(212, 241, 250); } .num { width: 150px; } .num input { width: 30px; text-align: center; } .total { clear: both; text-align: right; padding: 10px; font-size: 20px; color: red; } ul span { border: 1px solid lightgray; padding: 2px 10px; border-radius: 5px; /* background-color: lightgray; */ color: gray; } </style> </head> <body> <div id="wrap"> <ul> <li><input name='all' type='checkbox'>all</li> <li>name</li> <li>price</li> <li class="num">number</li> <li>add</li> <li>operation</li> </ul> <ul> <li><input type="checkbox" name='one'>one</li> <li>phone</li> <li>1000.00</li> <li class='num'> <input type="button" value='-'> <input type="text" name='num' value="1"> <input type="button" value='+'> </li> <li class="price">1000.00</li> <li><span>delete</span></li> </ul> <ul> <li><input type="checkbox" name='one'>one</li> <li>phone</li> <li>1000.00</li> <li class='num'> <input type="button" value='-'> <input type="text" name='num' value="1"> <input type="button" value='+'> </li> <li class="price">1000.00</li> <li><span>delete</span></li> </ul> <ul> <li><input type="checkbox" name='one'>one</li> <li>phone</li> <li>1000.00</li> <li class='num'> <input type="button" value='-'> <input type="text" name='num' value="1"> <input type="button" value='+'> </li> <li class="price">1000.00</li> <li><span>delete</span></li> </ul> <div class="total">total: <span> 0.00 </span></div> </div> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> // 计算总价的函数 function calcTotal() { // 设置总价初始值 var total = 0; // 获取所有name为one的input框 var allOne = $('input[name = "one"]'); // 获取单价 var price = $('.price'); // name为one的input框,如果被选中了,计算总价 allOne.each(function () { if ($(this).prop('checked')) { // 获取当前索引 var i = allOne.index($(this)); // eq()返回带有被选元素的索引 total += parseFloat(price.eq(i).text()); } }); // 总价的值写在页面上 $('.total span').text(total); } $(function () { // 获取ul里面的span(删除键),注册点击事件 $('ul span').click(function () { // 弹出输入框,如果用户点击了确认,返回true if (confirm('you delete your mother ne????')) { // 删除当前删除键坐在的ul行 $(this).parent().parent().closest('ul').remove(); // 否则。(用户点击取消)什么都不做 } else {} // 如果被选中了,改变总价,调用计算总价的函数 // 计算总价 calcTotal(); }); // 找到input 的name是num的元素,当内容改变时 $('input[name = "num"]').change(function () { // 获取值并转换为浮点数(数量) var val = parseFloat($(this).val()); // 如果值大于0,其父级的下一个兄弟的文本变成:当前值*当前值的父级的上一个元素值的浮点数 // 即 数量 * 单价 if (val > 0) { // 吧单价的值获取并转为浮点型 * 单价(当前元素的父级的下一个元素) $(this).parent().next().text(val * parseFloat($(this).parent().prev().text())); // 如果当前值为0 ,删除按钮trigger 触发click事件 } else if (val == 0) { // 由于input[val = '-']获取的是集合,三个全都删掉了。在这里添加判断,如果值为0,当前行执行delete点击事件函数 if (confirm('you delete your mother ne????')) { $(this).parent().parent().closest('ul').remove(); } else {} calcTotal(); // $(this).parent().parent().remove(); //直接删除 } else { //默认1 $(this).val(1); } calcTotal(); }); // - 按钮 // 获取减号,注册点击事件 $('input[value = "-"]').click(function () { // - 的下一个的值(数字)-1 转为整形,设为-下一个元素(数字)的值 //就是点击- 吧数字的值-- $(this).next().val(parseInt($(this).next().val()) - 1); // 数字值trigger change事件 $('input[name = "num"]').trigger('change'); }); // + 同理 $('input[value = "+"]').click(function () { $(this).prev().val(parseInt($(this).prev().val()) + 1); $('input[name = "num"]').trigger('change'); }); // 选择框 选中一个框就执行一次计算价格的函数 $('input[name = "one"]').click(function () { calcTotal(); }); // 当选中全选框时候,操作全选或者反选 $('input[name = "all"]').click(function () { // prop方法设置或返回备选元素的属性和值 // 当前元素(顶部复选框)被选中时(checked时) var ret = $(this).prop('checked'); console.log(ret); // 每一个单选框都添加checked属性 $('input[name="one"]').each(function () { $(this).prop('checked', ret); }); calcTotal(); }); }); </script> </body> </html>
布局就这样了~~~