登录
原创

jQuery-增减商品数量

发布于 2021-09-23 阅读 114
  • 前端
  • jQuery
原创

页面效果:

加减商品数量.gif

实现思路:

  1. 先将html页面结构搭建起来
  2. 引入jQuery文件
  3. 为增加元素添加点击事件,事件处理程序:
    ① 获取当前数量,
    ② 数量自增1
    ③ 将变化后的数量再赋值给显示数量的表单元素
  4. 为减元素添加点击事件,事件处理程序:
    ① 获取当前数量,
    ② 数量自减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>

评论区

零00
5粉丝

时光荏苒,我自清欢

0

0

0

举报