jQuery-增减商品数量 - sdk社区

页面效果：

加减商品数量.gif

实现思路：

先将html页面结构搭建起来
引入jQuery文件
为增加元素添加点击事件，事件处理程序：
① 获取当前数量，
② 数量自增1
③ 将变化后的数量再赋值给显示数量的表单元素
为减元素添加点击事件，事件处理程序：
① 获取当前数量，
② 数量自减1
③ 将变化后的数量再赋值给显示数量的表单元素
④ 在步骤①之后，步骤②之前添加条件判断，如果数量等于1，就跳出函数，不执行后面的②、③步骤，当数量为1后，不在继续减，点了减也没用

注意：每个加减数量设成一个小组，不互相影响，点击加减控制其小组内的兄弟数量- - -$(this).siblings(“.itxt”).val()

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增减商品数量</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .fruit {
            width: 200px;
            margin: 100px auto;
        }
        .fruit li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .num {
            width: 80px;
            height: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #333;
        }
        .num span {
            display: inline-block;
            width: 20px;
            text-align: center;
            cursor: pointer;
        }
        .num input {
            display: inline-block;
            width: 40px;
            height: 100%;
            border: none;
            text-align: center;
            border-left: 1px solid #333;
            border-right: 1px solid #333;
        }

    </style>
</head>
<body>
    <ul class="fruit">
        <li>
            <div class="f-name">苹果</div>
            <div class="num">
                <span class="decrease">-</span>
                <input type="text" class="itxt" value="1">
                <span class="increase">+</span>
            </div>
        </li>
        <li>
            <div class="f-name">红柚</div>
            <div class="num">
                <span class="decrease">-</span>
                <input type="text" class="itxt" value="1">
                <span class="increase">+</span>
            </div>
        </li>
        <li>
            <div class="f-name">榴莲</div>
            <div class="num">
                <span class="decrease">-</span>
                <input type="text" class="itxt" value="1">
                <span class="increase">+</span>
            </div>
        </li>
    </ul>
    <script src="js/jQuery.min.js"></script>
    <script>
        $(function() {
            // 加元素绑定点击事件
            $(".increase").click(function() {
                var num = $(this).siblings(".itxt").val();
                num++;
                $(this).siblings(".itxt").val(num);
            });
            // 减元素绑定点击事件
            $(".decrease").click(function() {
                var num = $(this).siblings(".itxt").val();
                if (num == 1) {
                    return false;
                }
                num--;
                $(this).siblings(".itxt").val(num);
            });
        });
    </script>
</body>
</html>