如何在JS中存储设置按钮计数值并实现循环，无需读取HTML属性

实现方案 #

你的核心需求是将计数完全存储在JS侧、不读取HTML的value属性、实现点击自增到3就重置为0的逻辑，完全可以用模运算替代switch分支，代码会更简洁。

原代码问题说明

1. 你定义的def是函数内局部变量，每次执行完就销毁，无法持久存储计数
2. 初始把def赋值为空数组[]，和数字3做比较的逻辑不符合预期
3. 没有区分不同按钮的计数，所有按钮共用同一个变量会互相干扰
4. 原点击事件选择器$("button")匹配不到你的input[type=button]元素，需要调整

最终实现代码

<!-- 原有HTML代码不用改 -->
<input class="btn btn-primary" id ="b1" type="button" value="Blue">
<input class="btn btn-primary" id ="b2" type="button" value="orange">
<input class="btn btn-primary" id ="b3" type="button" value="green">

// JS侧单独存储所有按钮的计数，和HTML完全隔离
const btnCount = {}

$('input[type=button].btn').click(function() {
  const currentId = this.id
  // 动态初始化新增按钮的默认值为0，不需要提前预定义所有id
  btnCount[currentId] = btnCount[currentId] ?? 0
  // 模3运算直接实现自增到3重置为0的逻辑，不需要switch和三元判断
  btnCount[currentId] = (btnCount[currentId] + 1) % 3
  // 可以直接从btnCount对象获取任意按钮的当前计数，示例：console.log(btnCount.b1)
})

逻辑说明：(当前值 + 1) % 3天然符合0→1→2→0的循环规则，完全不需要分支判断。

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