其他分享
首页 > 其他分享> > jQuery内容文本值||购物车案例-增减数量模块思路分析

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>

【效果】

 

标签:jQuery,val,文本框,itxt,num,模块,减号,siblings,购物车
来源: https://www.cnblogs.com/Abbynameswld/p/15024070.html