簡單的購物車
阿新 • • 發佈：2020-11-01
//頁面的展示
{__NOLAYOUT__}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="__STATIC__/jq.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>多選
<input type="checkbox" class="choose">
</td>
<td>使用者名稱</td>
<td>密碼</td>
<td>數量</td>
<td>單價</td>
<td>總價</td>
</tr>
{volist name="data" id="v"}
<tr>
<td><input type="checkbox" class="cho"></td>
<td>{$v.uname}</td>
<td>{$v.upwd}</td>
<td>
<button class="jia">+</button>
<span>{$v.num}</span>
<button class="jian">-</button>
</td>
<td>{$v.goods_price}</td>
<td class="count_price">{$v.count_price}</td>
</tr>
{/volist}
</table>
總計：￥<span id="zongjia">0</span>
</body>
</html>
//多選框的點選事件 jquery 的展示
$('.cho').click(function(){
sum_price();
})
//計算總價
function sum_price(){
var sum=0
var obj = $("input[class=cho]");
for (var i=0;i<obj.length;i++){
//一級元素 input 二級元素 checked（個人理解）
if(obj[i]['checked']){
sum+=Number($(obj[i]).parents("tr").find('.count_price').text());
}
}
$("#zongjia").text(sum);
}
//加號的運用
$(".jia").click(function () {
//獲取當前的購買數量
var num=Number($(this).next().text());
num+=1;
$(this).next().text(num);
//獲取單價
var one_price=Number($(this).parent().next().text());
//總價等於單價乘以數量
var count=num*one_price;
//獲取總價
$(this).parent().next().next().text(count)
sum_price();
});
//減號的運用
$(".jian").click(function () {
//獲取當前的購買數量
var num=Number($(this).prev().text());
num=num-1<1?1:num-1;
$(this).prev().text(num);
//獲取單價
var one_price=Number($(this).parent().next().text());
//總價等於單價乘以數量
var count=num*one_price;
$(this).parent().next().next().text(count)
sum_price()
});