如何实现两个独立按钮的标签独立循环计数功能？

我来帮你搞定这个问题！你的核心需求是两个按钮各自独立维护0→1→2→3→0的循环计数，点击时标签实时显示当前按钮的计数状态。之前的代码问题在于没有给每个按钮单独存储计数，也没处理循环逻辑，下面是完整的解决方法：

问题分析 #

你原来的代码直接修改标签的HTML内容，相当于两个按钮共用了同一个计数变量，自然无法独立；同时没有实现“到3后回到0”的循环逻辑，只会持续累加数值。

完整实现代码 #

HTML（保留你原来的结构即可） #

<label for="buttons" class="val">0</label>
<input class="btn btn-primary button1" type="button" value="button1">
<input class="btn btn-primary button2" type="button" value="button2">

JavaScript（jQuery版本） #

// 初始化每个按钮的计数，默认从0开始
$('.button1, .button2').data('count', 0);

// 给两个按钮绑定点击事件
$('.btn-primary').click(function() {
    // 获取当前按钮的当前计数
    let currentCount = $(this).data('count');
    // 计算新计数：加1后对4取模，实现0→1→2→3→0的循环
    let newCount = (currentCount + 1) % 4;
    // 更新标签显示的数值
    $('.val').text(newCount);
    // 把新计数存回当前按钮的data属性，保留独立状态
    $(this).data('count', newCount);
});

代码解释 #

• 独立计数存储：用data('count')给每个按钮单独绑定计数变量，这样两个按钮的计数完全分开，互不影响。
• 循环逻辑实现：通过(currentCount + 1) % 4，当计数到3时，加1后除以4余数为0，刚好回到初始状态，完美实现循环规则。
• 统一事件绑定：用.btn-primary选择器同时绑定两个按钮的点击事件，避免重复代码，逻辑更简洁。

这样操作后，点击button1时会按自己的循环计数更新标签，点击button2时会立刻切换到它自己的循环计数状态，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Davi