最近一个项目中实现的一个功能,一个购物车列表所有商场的增加减少,并且实时的计算商品总金额和结算总金额,里面用到了很多以前没怎么熟练的jquery方法,所以决定记录一下。不过问题还是有的,比如用户并不能通过键盘输入定义商品,只能通过加减按钮,因为我使用的是span标签并且用text()方法控制内部的值,想了想还是以后再说吧。
js主要代码如下(需要引入jquery):
$(function(){
$("#p").click(function() {
var p = $("#p").text();
if(p == "全选"){
$("input:checkbox[name=pru]").prop('checked',true);
$("#p").text("反选");
}else{
$("input:checkbox[name=pru]").removeAttr("checked");
$("#p").text("全选");
}
});
$(".jia").click(function() {
var proPrice = parseInt($(this).closest('.pro-box').find(".pro-price").text());
var proNum = parseInt($(this).prev().text());
proNum = proNum + 1;
var proSum = proNum*proPrice;
$(this).closest('.pro-box').find(".list-price").text(proSum);
$(this).prev().text(proNum);
sum();
});
$(".jian").click(function() {
var proPrice = parseInt($(this).closest('.pro-box').find(".pro-price").text());
var proNum = parseInt($(this).next().text());
proNum = proNum - 1;
if(proNum < 0){
proNum = 0;
}
var proSum = proNum*proPrice;
$(this).closest('.pro-box').find(".list-price").text(proSum);
$(this).next().text(proNum);
sum();
});
});
function sum(){
var sum = 0;
$(".list-price").each(function(){
sum += $(this).text() * 1;
});
$("#sum").text(sum);
}
sum();
总计四个方法,第一个用来控制反选全选,然后就是数值的加减筛选计算结果,最后是数值的统计。
html代码如下:
<div class="panel-content" id="ShoppingCart">
<div class="cart-btn">
<p>购物车列表总金额:<span class="text-important">¥</span><span class="text-important" id="sum">0</span></p>
<button type="button" id="p" class="btn default">全选</button>
<button type="button" class="btn success">购买选中</button>
<button type="button" class="btn important">删除选中</button>
</div>
<table class="table table-hover">
<thead>
<tr>
<td>选择</td>
<td>订单编号</td>
<td>商品名称</td>
<td>数量</td>
<td>需支付金额</td>
<td>加入时间</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr class="pro-box">
<td><input type="checkbox" name="pru" value="HK4245646" /><span class="pro-price hidden">120</span></td>
<td><a href="javascript:;">HK4245646</a></td>
<td>商品的名称,可能很长很长,需要截取</td>
<td><a href="javascript:;" class="ico jian"></a><span class="pro-num text-default">8</span><a href="javascript:;" class="ico jia"></a></td>
<td><p class="text-important">¥<span class="list-price">960</span></p></td>
<td>2019/03/20 15:14</td>
<td><a href="#" class="text-success">购买</a> <a href="#" class="text-important">删除</a></td>
</tr>
<tr class="pro-box">
<td><input type="checkbox" name="pru" value="HK4245646" /><span class="pro-price hidden">100</span></td>
<td><a href="javascript:;">HK4245646</a></td>
<td>商品的名称,可能很长很长,需要截取</td>
<td><a href="javascript:;" class="ico jian"></a><span class="pro-num text-default">1</span><a href="javascript:;" class="ico jia"></a></td>
<td><p class="text-important">¥<span class="list-price">100</span></p></td>
<td>2019/03/20 15:14</td>
<td><a href="#" class="text-success">购买</a> <a href="#" class="text-important">删除</a></td>
</tr>
</tbody>
</table>
</div>
里面很多类名来自我自己整理的框架,和增加了一些css的定义。html里面的效果主要是方便js对于数值的读取和赋值,比如初始的价格,数量等。
最终实现效果:
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.ruletree.club/archives/1123/