首先来看布局:
布局非常简略,这儿就不多说了,直接来看功用实现部分,首要因为每次每个模块点+或许-都会更改下面的总件数和总价,所以直接写一个函数来获取总件数和总价,然后当点击+或许-号的时分就调用这个函数即可。
那么这个函数的思路如下:
1.循环每一个模块的件数,然后进行遍历,将每一个模块的件数加起来便是总件数
2.循环每一个模块的总结个,然后进行遍历,将每一个模块的总价格加起来便是终究的总价格
3.把总件数和总价格赋值给下面对应的元素即可
这儿要注意获取到的件数和价格都是字符串类型的需求进行数值转化再相加。
终究的代码如下:
<!DOCTYPE html>
<html>
<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">
<script src="../js/jquery.min.js"></script>
<title>数量添加</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 500px;
height: 100px;
/* background-color: pink; */
margin-top: 20px;
margin-left: 200px;
}
.change a {
float: left;
text-decoration: none;
color: #ccc;
width: 20px;
height: 25px;
border: 1px solid #cacbcb;
text-align: center;
line-height: 25px;
}
.change input {
float: left;
height: 25px;
width: 50px;
border: 1px solid #ccc;
border-left: 0;
border-right: 0;
outline: none;
text-align: center;
}
.wrapper .one {
float: left;
margin-left: 50px;
margin-right: 50px;
color: #746651;
}
.wrapper .total {
float: left;
margin-left: 50px;
color: #746651;
}
.footer {
margin-left: 240px;
}
.footer p {
float: left;
margin-left: 20px;
}
.footer a {
text-decoration: none;
color: red;
font-weight: 700;
}
.footer button {
width: 60px;
height: 35px;
background-color: #df5e4c;
color: #fff;
border: 0;
margin-top: -10px;
margin-left: 10px;
}
</style>
</head>
<body>
<script>
$(function() {
// 刚开始就调用一次计算的函数
getresult();
// 1.声明一个变量,点击+时让这个值++,然后赋值给文本框
// 点击+就进行++然后赋值给文本框
$('.increment').click(function() {
// 获取文本框里面的数字
var num = $(this).siblings('.itxt').val();
num++;
$(this).siblings('.itxt').val(num)
// 然后让总共的价格改变
$(this).parent().siblings('.total').text('¥' + ($(this).parent().siblings('.one').text().slice(1) * num).toFixed(2))
getresult();
})
// 点击-就进行--然后赋值给文本框
$('.decrement').click(function() {
// 获取文本框里面的数字
// 获取文本框里面的数字
var num = $(this).siblings('.itxt').val();
num--;
// 不能再减
if (num === 0) {
return false
}
$(this).siblings('.itxt').val(num)
// 然后让总共的价格改变
$(this).parent().siblings('.total').text('¥' + ($(this).parent().siblings('.one').text().slice(1) * num).toFixed(2))
getresult();
})
// 如果用户直接修改文本框里面的值
// 采用表单change事件
$('.itxt').change(function() {
var num = $(this).val();
// 得到数量
$(this).parent().siblings('.total').text('¥' + ($(this).parent().siblings('.one').text().slice(1) * num).toFixed(2))
})
// 写一个获取总件数和总价格的函数,这样每次点击就可以更新
function getresult() {
// 总件数
var count = 0;
// 总价格
var money = 0.00;
// 循环每一个模块的件数
$('.itxt').each(function(index, ele) {
count += parseInt($(ele).val());
})
// 循环每一个模块的总价格
$('.total').each(function(index, ele) {
money += parseFloat($(ele).text().slice(1))
console.log($(ele).text().slice(1));
})
// 赋值给下面的总件数
$('.nums').text(count)
// 赋值给下面的总价格
money = '¥' + money.toFixed(2)
$('.tots').text(money)
}
})
</script>
<div>
<p>¥12.60</p>
<div>
<a href="javascript:;">-</a>
<input type="text" value="1">
<a href="javascript:;">+</a>
</div>
<p>¥12.60</p>
</div>
<div>
<p>¥24.80</p>
<div>
<a href="javascript:;">-</a>
<input type="text" value="1">
<a href="javascript:;">+</a>
</div>
<p>¥24.80</p>
</div>
<div>
<p>¥29.80</p>
<div>
<a href="javascript:;">-</a>
<input type="text" value="1">
<a href="javascript:;">+</a>
</div>
<p>¥29.80</p>
</div>
<div>
<p>已经选<a href="#">0</a>件商品</p>
<p>总价:<a href="#">¥0.00</a></p>
<button>去结算</button>
</div>
</body>
</html>
最后补充一点:在开始点+或许-号之前需要调用一次函数,相当于进行初始化操作。
最后实现的效果如下: