如何精简为多个不同ID元素绑定重复操作的JavaScript代码

代码简化方案 #

你可以通过抽离通用逻辑、循环绑定事件的方式大幅简化代码。同时你原代码存在两处问题：一是var b1,b2,b3,b4 = true;只有b4会被赋值为true，b1~b3都是undefined；二是按钮点击函数的参数实际接收的是事件对象，不是你在start里声明的状态变量，原逻辑实际运行无法生效。以下是修复问题后的优化实现：

方案1：循环绑定+通用处理函数（最贴合原逻辑的修改）

// 统一存储所有按钮的激活状态
const btnStatus = {
  btn1: true,
  btn2: true,
  btn3: true,
  btn4: true
}

function start() {
  // 循环批量绑定事件，避免重复代码
  for (let i = 1; i <= 4; i++) {
    const btnId = `btn${i}`
    document.getElementById(btnId).onclick = () => handleBtnClick(btnId)
  }
}

// 所有按钮共用的点击逻辑
function handleBtnClick(btnId) {
  if (btnStatus[btnId]) {
    document.getElementById(btnId).style.opacity = ".25"
    btnStatus[btnId] = false
  }
}

方案2：状态存在元素自身属性，减少额外变量

不需要单独声明状态对象，直接把按钮的激活状态存在元素的自定义属性上，代码更精简：

function start() {
  for (let i = 1; i <= 4; i++) {
    const btn = document.getElementById(`btn${i}`)
    btn.dataset.isActive = 'true'
    btn.onclick = function() {
      if (this.dataset.isActive === 'true') {
        this.style.opacity = '.25'
        this.dataset.isActive = 'false'
      }
    }
  }
}

方案3：事件委托（适合按钮数量多/后续会新增按钮的场景）

如果所有按钮有共同的父元素，直接给父元素绑定事件即可，不需要给每个按钮单独绑定，后续新增同规则按钮也无需修改绑定代码：

const btnStatus = {
  btn1: true, btn2: true, btn3: true, btn4: true
}

function start() {
  // 假设所有按钮都在id为btnBox的父容器内
  document.getElementById('btnBox').addEventListener('click', (e) => {
    const targetBtn = e.target
    // 只处理id以btn开头的目标按钮
    if (targetBtn.id.startsWith('btn') && btnStatus[targetBtn.id]) {
      targetBtn.style.opacity = '.25'
      btnStatus[targetBtn.id] = false
    }
  })
}

核心优化点 #

• 移除重复的函数声明：4个按钮的逻辑完全一致，不需要单独定义4个功能相同的函数
• 批量绑定事件：通过循环避免重复书写多次getElementById和事件绑定代码
• 修复原代码的变量、参数逻辑错误，保证功能正常运行

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