一、案例效果演示
二、案例整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jQuery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
table {
text-align: center;
}
td {
padding: 5px;
}
input {
width: 40px;
outline: none;
margin: 0 5px;
}
button {
width: 20px;
}
</style>
</head>
<body>
<div id="content">
<table border="1" cellspacing="0">
<tr>
<th style="width: 100px;">商品</th>
<th style="width: 200px;">数量</th>
<th style="width: 100px;">单价</th>
<th style="width: 200px;">总价</th>
<th style="width: 200px;">操作</th>
</tr>
<tr>
<td>金桔柠檬水</td>
<td><button class="reduce">-</button><input type="text" value="1" class="inputNum" /><button class="add">+</button></td>
<td>¥<span class="itemPrice">4</span></td>
<td>¥<span class="itemMoney">4</span> </td>
<td><em class="del">删除</em></td>
</tr>
<tr>
<td>营养快线</td>
<td><button class="reduce">-</button><input type="text" value="1" class="inputNum" /><button class="add">+</button></td>
<td>¥<span class="itemPrice">5</span></td>
<td>¥<span class="itemMoney">5</span> </td>
<td><em class="del">删除</em></td>
</tr>
<tr>
<th>总数量:</th>
<th><span class="allNum">0</span></th>
<th>全部总价:</th>
<th>¥<span class="allMoney">0</span></th>
<th></th>
</tr>
</table>
</div>
<script>
$(function() {
$('.add').click(function() {
// 最好是摘出来 这样看起来直观
// 数量元素
$input = $(this).siblings('.inputNum');
// 输入框中的值
$inputNum = $input.val();
$inputNum++;
$input.val($inputNum);
// 获取单个商品价格数值
$itemPrice = $(this).parent().siblings().find('.itemPrice').text();
// 获取总价元素
itemAllMoney = $(this).parent().siblings().find('.itemMoney')
itemAllMoney.text($inputNum * $itemPrice);
getSum();
});
$('.reduce').click(function() {
// 最好是摘出来 这样看起来直观
// 数量元素
var $input = $(this).siblings('.inputNum');
// 输入框中的值
var $inputNum = $input.val();
if ($inputNum > 1) {
$inputNum--;
$input.val($inputNum);
// 获取单个商品价格数值
var $itemPrice = $(this).parent().siblings().find('.itemPrice').text();
// 获取总价元素
var itemAllMoney = $(this).parent().siblings().find('.itemMoney')
itemAllMoney.text($inputNum * $itemPrice);
}
getSum();
});
$('.inputNum').change(function() {
console.log($(this).val());
var $inputNum = $(this).val()
if ($inputNum <= 1) {
$(this).val(1);
} else {
// 获取单个商品价格数值
var $itemPrice = $(this).parent().siblings().find('.itemPrice').text();
// 获取总价元素
var itemAllMoney = $(this).parent().siblings().find('.itemMoney')
itemAllMoney.text($inputNum * $itemPrice);
}
getSum();
});
$('.del').click(function() {
$(this).parents('tr').remove();
getSum();
});
function getSum() {
var allNum = 0;
var allMoney = 0;
// $('.inputNum').val();
// console.log($('.inputNum'));
$('.inputNum').each(function(i, ele) {
// console.log($(ele).val());
allNum += parseInt($(ele).val());
});
console.log(allNum); //打印一下总的数量
$('.itemMoney').each(function(i, ele) {
// console.log($(ele).val());
allMoney += parseFloat($(ele).text());
});
console.log(allMoney); //打印一下总的金额
$('.allNum').text(allNum);
$('.allMoney').text(allMoney);
}
getSum();
});
</script>
</body>
</html>
五、总结
总金额和总数量需要进行封装,谁用谁调用函数。
当我加的时候需要调用、减的时候需要调用、输入框值改变的时候也需要调用、页面加载完毕之后,刚上来也需要调用一下。