本文实例为大家分享了Jquery实现购物车的具体代码,供大家参考,具体内容如下 1.描述 2.HTML布局 <div> <button>全选
本文实例为大家分享了Jquery实现购物车的具体代码,供大家参考,具体内容如下
1.描述
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>');
}
--结束END--
本文标题: jQuery实现购物车
本文链接: https://www.lsjlt.com/news/152550.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0