jQuery内容文本值||购物车案例-增减数量模块思路分析

【要求】

点击加号或减号相应文本框值中数量发生变化

 

 

 

【分析】

1、核心思路:首先声明一个变量,当我们点击+号，就让这个值++，然后重新赋值给文本框

2、注意1：只能增加本商品的数量，就是当前+号的兄弟文本框itxt的值。所以必须从$(this)出发去找

3、修改表单的值是val()方法

4、注意2：这个变量的初始值应该是这个文本框的初始值，在这值的基础上++。要获取表单的值

5、减号的思路同理，但是如果文本框的是1，就不能再减，利用return false跳出当前的函数

【代码】

html代码：

<body>
    <div class="countbox">
        <h4>数量</h4>
        <div class="quantity">
            <a href="javascript:;" class="decrement">-</a>
            <input type="text" class="itxt" value="1">
            <a href="javascript:;" class="increment">+</a>
        </div>
        <div class="quantity">
            <a href="javascript:;" class="decrement">-</a>
            <input type="text" class="itxt" value="1">
            <a href="javascript:;" class="increment">+</a>
        </div>
        <div class="quantity">
            <a href="javascript:;" class="decrement">-</a>
            <input type="text" class="itxt" value="1">
            <a href="javascript:;" class="increment">+</a>
        </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();
            if (num == 1) {
                return false;
            }
            num--;
            $(this).siblings(".itxt").val(num);
        });
        // 2、加号
        $(".increment").click(function() {
            //得到当前被点击减号-的兄弟文本框的值
            var num = $(this).siblings(".itxt").val();
            num++;
            $(this).siblings(".itxt").val(num);
        })
    })
</script>

【效果】

 

posted @ 2021-07-17 16:27  蛋蛋仔  阅读(164)  评论(0)  编辑  收藏  举报