本文实例为大家分享了jQuery实现购物车的具体代码,供大家参考,具体内容如下
1 描述
*描述:1 点击减号,input值自减,更新小计,更新总计2 点击加
本文实例为大家分享了jQuery实现购物车的具体代码,供大家参考,具体内容如下
1.描述
/* 描述: 1.点击减号,input值自减,更新小计,更新总计 2.点击加号,input值自加,更新小计,更新总计 3.点击全选 设置li中的复选框按钮状态都为被选中状态 4.点击反选 本来被选中的复选框设为未选中,未选中的设为选中 5.点击每一个复选按钮,更新总计 6.函数getAll用于设置总计 */
2.HTML布局
<div> <button>全选</button><button>反选</button> <ul> <li> <input type="checkbox" name="" id=""> 商品1 单价 <i>9.99</i> <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button> 小计: <span>0.00</span> </li> <li> <input type="checkbox" name="" id=""> 商品1 单价 <i>19.99</i> <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button> 小计: <span>0.00</span> </li> <li> <input type="checkbox" name="" id=""> 商品1 单价 <i>99.99</i> <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button> 小计: <span>0.00</span> </li> <li> <input type="checkbox" name="" id=""> 商品1 单价 <i>999.99</i> <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button> 小计: <span>0.00</span> </li> </ul> <p>一共0件商品, 共计 0.00 元</p> </div>
3.引入jQuery文件
<script src="js/jquery.js"></script>
4.购物车实现
4.1 点击减号,input值自减,更新小计 小计:单价*数量
$('.cut').click(function () { // 获取对应输入框的值 var num = $(this).next(':text').val(); // console.log(num); if (num > 0) { // 自减 num--; } // 更新输入框的值 $(this).next(':text').val(num); // 小计 var add = Number($(this).prev().text() * num).toFixed(2); $(this).nextAll('span').text(add); getAll(); // 总计 });
4.2. 点击加号,input值加1,更新小计 小计:单价*数量
$('.add').click(function () { // 获取对应输入框的值 var num = $(this).prev().val(); // 自加 num++; // 更新输入框的值 $(this).prev().val(num); // 小计 var add = Number($(this).siblings('i').text() * num).toFixed(2); $(this).nextAll('span').text(add); getAll(); // 总计 });
4.3 点击全选 将li中的复选按钮都设置成被选中状态 更新总计
$('button').eq(0).click(function () { // 所有的复选按钮的都选中 $(':checkbox').prop('checked', true); getAll(); // 总计 });
4.4 点击反选 本来被选中的复选框设为未选中,未选中的设为选中 更新总计
$('button').eq(1).click(function () { // 遍历每一个复选框 $(':checkbox').each(function (i, v) { // console.log(!v.cheacked); // $(v).prop('checked',!v.checked) // checked属性进行取反 v.checked = !v.checked; }); getAll(); // 总计 });
4.5 点击每一个复选按钮,更新总计
$(':checkbox').click(getAll);
4.6 函数getAll用于设置总计
function getAll() { // 定义变量,分别用于存总数和总价 var sum = 0; var allnum = 0; // 所有被选中的复选框 var t = $(':checkbox:checked').each(function (i, v) { // console.log(Number($(v).nextAll('span').text())); // 所有被选中的复选框小计的总和 sum += Number($(v).nextAll('span').text()); //所有被选中的复选框的输入框值的总和 allnum += Number($(v).nextAll(':text').val()); }); // 设置p的内容 $('p').html('<p>一共' + allnum + '件商品, 共计 ' + sum.toFixed(2) + ' 元</p>'); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持好代码网。