版权声明：学而不思则罔，思而不学则殆 https://blog.csdn.net/weixin_43422505/article/details/84404117
购物车JS的操作(jquery)
先说思路:
先写计算方法,然后在’勾选’,'数量增加’时调用计算方法
展示代码
- html代码
<li class="col01"><input type="checkbox" name="checked" checked onclick="click_check()"></li>
<li class="col02"><img src="/static/images/{{ 图片路径 }}"></li>
<li class="col03">{{ 商品名称 }}<br><em>{{ 商品价钱}}元/{{商品的单位 }}</em></li>
<li class="col04">{{ 商品的单位 }}</li>
<li class="col05"><span>{{ 商品的价钱 }}</span>元</li>
<li class="col06">
<div class="num_add">
<a href="javascript:;" class="add fl">+</a>
<input type="text" class="num_show fl" value="1">
<a href="javascript:;" class="minus fl">-</a>
</div>
</li>
<li class="col07">25.80元</li>
</ul>
<ul class="settlements">
<li class="col01"><input type="checkbox" name="checked_all" id="checked_all" onclick="checked_all()" checked=""></li>
<li class="col02">全选</li>
<li class="col03">合计(不含运费)：<span>¥</span><em id="he_ji">42.60</em><br>共计<b id="count_all">2</b>件商品</li>
<li class="col04"><a href="place_order.html">去结算</a></li>
</ul>
- js 代码
<script type="text/javascript">
$(total_price());
$('.add').click(function () {
$(this).next().val(parseInt($(this).next().val())+1);
total_price();
});
$('.minus').click(function () {
var num= parseInt($(this).prev().val());
if (num>0){
$(this).prev().val(parseInt($(this).prev().val())-1);
}
total_price();
});
function click_check() {
total_price();
}
function checked_all() {
if ($('#checked_all').prop('checked')){
$('[name="checked"]').prop('checked', true);
} else {
$('[name="checked"]').prop('checked', false);
}
total_price();
}
function total_price() {
var he_ji = 0;
var count_all = 0;
$('[name="checked"]').each(function () {
if ($(this).prop('checked')) {
var price= $(this).parent().parent().children('.col05').children('span').html();
var num = $(this).parent().parent().children('.col06').children('div').children('input').val();
var xiao_ji=parseFloat(price)*parseInt(num);
$(this).parent().parent().children('.col07').html(xiao_ji.toFixed(2)+'元');
he_ji = xiao_ji+ he_ji;
count_all = count_all + parseInt(num);
}
});
$('#he_ji').html(he_ji);
$('#count_all').html(count_all)
}
</script>
分析代码:
点击加号,点击减号
- html代码
<a href="javascript:;" class="add fl">+</a>
<input type="text" class="num_show fl" value="1">
<a href="javascript:;" class="minus fl">-</a>
- js代码
加:通过class="add fl"来获取点击事件,然后使input标签的value值+1
减:相比较加,减需要判断一下,如果不为0,则可以进行减法运算
$('.add').click(function () {
$(this).next().val(parseInt($(this).next().val())+1);
total_price();
});
$('.minus').click(function () {
var num= parseInt($(this).prev().val());
if (num>0){
$(this).prev().val(parseInt($(this).prev().val())-1);
}
total_price();
});
勾选商品,全选商品
html代码,给勾选绑定点击事件onclick="".触发对应的js的函数
<li class="col01"><input type="checkbox" name="checked" checked onclick="click_check()"></li>
<li class="col01"><input type="checkbox" name="checked_all" id="checked_all" onclick="checked_all()" checked=""></li>
{#勾选商品#}
function click_check() {
total_price();
}
{# 全选商品 #}
function checked_all() {
if ($('#checked_all').prop('checked')){
$('[name="checked"]').prop('checked', true);
} else {
$('[name="checked"]').prop('checked', false);
}
total_price();
}
计算价钱函数
价钱有小计和总价钱,如第一张图
小计的html代码
<li class="col07">25.80元</li>
总价钱的html代码
<li class="col03">合计(不含运费)：<span>¥</span><em id="he_ji">42.60</em><br>共计<b id="count_all">2</b>件商品</li>
js代码
function total_price() {
var he_ji = 0; 商品数量
var count_all = 0; 商品价钱
$('[name="checked"]').each(function () { 判断是否勾选
if ($(this).prop('checked')) { 如果勾选了则继续执行
获取商品单价 var price= $(this).parent().parent().children('.col05').children('span').html();
获取商品数目 var num = $(this).parent().parent().children('.col06').children('div').children('input').val();
计算小计 var xiao_ji=parseFloat(price)*parseInt(num);
修改小计文本 $(this).parent().parent().children('.col07').html(xiao_ji.toFixed(2)+'元');
商品数目 he_ji = xiao_ji+ he_ji;
购物车总价钱 count_all = count_all + parseInt(num);
}
});
$('#he_ji').html(he_ji); 修改合计的商品的数目
$('#count_all').html(count_all) 修改购物车当前的总价钱
}
然后本页面就算是写完了
(感谢司金辉大佬)