jQuery内容文本值||购物车案例-修改商品小计模块思路分析
作者：互联网
【要求】
点击加号或减号、修改文本框，对应小计发生变换
【思路】
1、核心思路：每次点击+号或者-号，根据“文本框的值*当前商品的单价”就是商品的小计
2、注意1：只能增加本商品的小计，就是当前商品的小计模块
3、修改普通元素的内容是text()方法
4、注意：当前商品的价格要把￥符号去掉再相乘，否则会报错。采用截取字符串substr(1)方法
5、parents('选择器')可以返回指定祖先元素
6、最后计算的结果如果想保留两位小数，通过toFixed(2)方法
7、用户也可以直接修改表单里面的值，同样要计算小计。用表单change事件
8、用新的表单内的值乘以单价即可，但是还是当前商品的小计
【代码】
html代码
<body>
<div class="countbox">
<div class="thead">
<h4>单价</h4>
<h4>数量</h4>
<h4>小计</h4>
</div>
<!-- 主体 -->
<div class="tbody">
<!-- 1 -->
<div class="row">
<!-- 单价 -->
<div class="price">￥12.60</div>
<!-- 数量 -->
<div class="quantity">
<div class="num">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<!-- 小计 -->
<div class="sum">￥12.60</div>
</div>
<!-- 2 -->
<div class="row">
<!-- 单价 -->
<div class="price">￥12.60</div>
<!-- 数量 -->
<div class="quantity">
<div class="num">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<!-- 小计 -->
<div class="sum">￥12.60</div>
</div>
<!-- 3 -->
<div class="row">
<!-- 单价 -->
<div class="price">￥12.60</div>
<!-- 数量 -->
<div class="quantity">
<div class="num">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<!-- 小计 -->
<div class="sum">￥12.60</div>
</div>
</div>
</div>
</body>
js代码
<!-- 引入jquery.mini.js文件 -->
<script src="jquery.mini.js"></script>
<script>
$(function() {
//1、 减号
$(".decrement").click(function() {
//得到当前被点击减号-的兄弟文本框的值
var num = $(this).siblings(".itxt").val();
//获取当前被点击减号-对应的单价
var price = $(this).parent().parent().siblings(".price").html().substr(1);
// 相当于 price = $(this).parents(".quantity").siblings(".price").html().substr(1);
if (num == 1) {
return false;
};
num--;
$(this).siblings(".itxt").val(num);
//修改当前被点击加号+对应的小计，toFixed(2)保留两位小数
sum = (price * num).toFixed(2);
$(this).parent().parent().siblings(".sum").html("￥" + sum);
});
// 2、加号
$(".increment").click(function() {
//得到当前被点击加号+的兄弟文本框的值
var num = $(this).siblings(".itxt").val();
//获取当前被点击加号+对应的单价
var price = $(this).parent().parent().siblings(".price").html().substr(1);
// 相当于 price = $(this).parents(".quantity").siblings(".price").html().substr(1);
num++;
$(this).siblings(".itxt").val(num);
//修改当前被点击加号+对应的小计，toFixed(2)保留两位小数
sum = (price * num).toFixed(2);
$(this).parent().parent().siblings(".sum").html("￥" + sum);
// 相当于 price = $(this).parents(".quantity").siblings(".sum").html("￥" + sum)
});
//3、修改文本框change
$(".quantity .itxt").change(function() {
//得到当前被修改文本框的值
var num = $(this).val();
//得到当前被修改文本框的对应的单价
var price = $(this).parents(".quantity").siblings(".price").html().substr(1);
sum = (price * num).toFixed(2);
//修改当前被修改文本框的对应的小计，toFixed(2)保留两位小数
$(this).parents(".quantity").siblings(".sum").html("￥" + sum);
// 相当于 price = $(this).parents(".quantity").siblings(".sum").html("￥" + sum)
});
})
</script>
标签：jQuery,price,html,小计,购物车,num,siblings,sum 来源： https://www.cnblogs.com/Abbynameswld/p/15024652.html