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>
