如何使用jQuery为每个Div实现独立的加减计数器功能

嘿，我明白你的问题了——你创建了5个带加减按钮的Div，但所有计数器都共用一个全局变量，导致点击任何按钮所有数值都跟着变对吧？这是因为全局变量是所有元素共享的，咱们得让每个Div自己管自己的数值才行。

问题根源分析 #

你的原代码里用了一个全局的let i = 0，所有点击事件都会修改这个变量，自然所有Div的数值都会同步更新。另外，用prev()/prev().prev()来定位对应的Div也很脆弱——如果以后调整按钮顺序或者添加其他元素，这个关联就会失效。

解决方案思路 #

咱们要做两件关键的事：

1. 给每个计数器独立存储数值：不用全局变量，而是把每个Div的数值存在自己的元素上（比如用jQuery的data()方法）。
2. 清晰关联按钮和对应的Div：把每个Div和它的加减按钮放在一个容器里，这样点击按钮时能快速找到属于自己的那个数值Div，不用依赖不稳定的兄弟元素定位。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>独立计数器示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* 把样式统一放CSS里，比在JS里循环设置高效多了 */
        .counter-group {
            margin-bottom: 20px;
        }
        .count-value {
            background-color: yellow;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px; /* 让数值垂直居中 */
            display: inline-block; /* 和按钮在一行展示 */
            margin-right: 10px;
            font-size: 24px;
        }
        .plus, .minus {
            padding: 8px 16px;
            font-size: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <script>
        $(document).ready(function() {
            // 创建5个独立的计数器组
            for (let i = 0; i < 5; i++) {
                // 每个计数器用一个容器包裹，方便关联元素
                const group = $('<div class="counter-group"></div>');
                // 创建数值Div，初始值0，用data存储当前计数
                const countDiv = $('<div class="count-value">0</div>').data('count', 0);
                // 创建加减按钮
                const plusBtn = $('<button class="plus" type="button">+</button>');
                const minusBtn = $('<button class="minus" type="button">-</button>');
                
                // 把元素组装到组里，再添加到页面
                group.append(countDiv).append(plusBtn).append(minusBtn);
                $('body').append(group);
            }

            // 递增按钮点击事件（用事件委托处理动态创建的元素）
            $(document).on('click', '.plus', function() {
                // 找到当前按钮所在的计数器组，再定位里面的数值Div
                const countDiv = $(this).closest('.counter-group').find('.count-value');
                // 获取当前计数，加1后更新
                let currentCount = countDiv.data('count');
                countDiv.data('count', ++currentCount).text(currentCount);
            });

            // 递减按钮点击事件
            $(document).on('click', '.minus', function() {
                const countDiv = $(this).closest('.counter-group').find('.count-value');
                let currentCount = countDiv.data('count');
                // 确保数值不小于0
                if (currentCount > 0) {
                    countDiv.data('count', --currentCount).text(currentCount);
                }
            });
        });
    </script>
</body>
</html>

关键修改点说明 #

• 用容器分组：每个Div和按钮都在.counter-group容器里，点击按钮时通过closest('.counter-group')快速找到所属组，再用find('.count-value')定位数值Div，这样不管结构怎么调整，关联都不会断。
• 独立存储数值：每个count-value Div用data('count')保存自己的数值，完全独立于其他计数器，不会互相影响。
• 事件委托：因为元素是动态创建的，用$(document).on('click', '.plus', ...)来绑定事件，确保新创建的按钮也能触发事件。
• 样式分离：把样式从JS移到CSS里，不仅效率更高，也更易维护。

这样修改后，每个计数器的加减操作就完全独立了，点击任何按钮只会改变对应Div的数值~

内容的提问来源于stack exchange，提问作者Mr. Oleg