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>