如何简化重复的JavaScript文本编辑交互代码？

核心思路：统一命名规则 + 批量绑定/事件委托 #

先确保按钮和对应输入框的ID有规律，比如按钮ID是text01_edit，输入框是input_text01，两者共享01这类编号，就能通过按钮ID提取对应输入框的ID，避免重复代码。

方案1：事件委托（推荐，新增元素无需额外代码） #

给所有按钮的父容器绑定一次点击事件，通过事件源判断是否是编辑按钮，再找到对应输入框：

HTML结构示例 #

<div class="edit-container">
  <button id="text01_edit">编辑文本1</button>
  <input type="text" id="input_text01" value="示例文本1" disabled>
  
  <button id="text02_edit">编辑文本2</button>
  <input type="text" id="input_text02" value="示例文本2" disabled>
  
  <!-- 新增的按钮和输入框直接添加即可，无需修改JS代码 -->
  <button id="text03_edit">编辑文本3</button>
  <input type="text" id="input_text03" value="示例文本3" disabled>
</div>

JS代码 #

// 获取父容器
const editContainer = document.querySelector('.edit-container');

// 绑定点击事件
editContainer.addEventListener('click', function(e) {
  // 判断点击目标是编辑按钮
  if (e.target.id.startsWith('text') && e.target.id.endsWith('_edit')) {
    // 提取编号：text01_edit → 01
    const num = e.target.id.replace('text', '').replace('_edit', '');
    // 找到对应输入框
    const input = document.getElementById(`input_text${num}`);
    
    if (input) {
      // 启用编辑
      input.disabled = false;
      // 聚焦并将光标移到内容末尾
      input.focus();
      input.setSelectionRange(input.value.length, input.value.length);
    }
  }
});

方案2：循环批量绑定事件 #

如果不想用事件委托，也可以遍历所有编辑按钮，批量绑定点击逻辑：

JS代码 #

// 获取所有以_edit结尾的按钮
const editButtons = document.querySelectorAll('[id$="_edit"]');

// 遍历绑定事件
editButtons.forEach(btn => {
  btn.addEventListener('click', function() {
    // 提取编号
    const num = this.id.replace('text', '').replace('_edit', '');
    const input = document.getElementById(`input_text${num}`);
    
    if (input) {
      input.disabled = false;
      input.focus();
      input.setSelectionRange(input.value.length, input.value.length);
    }
  });
});

注意：如果之后动态新增按钮，需要重新执行这段循环代码绑定事件，这也是事件委托更推荐的原因

关于this无效的问题 #

如果之前是在HTML里用onclick="editFunc()"这种方式绑定函数，函数里的this默认指向window，不是按钮元素。解决办法有两个：

1. 在HTML里传this：onclick="editFunc(this)"，然后函数里接收参数：

function editFunc(btn) {
  const num = btn.id.replace('text', '').replace('_edit', '');
  // 后续逻辑同上
}

2. 改用addEventListener绑定事件（即上面两种方案的方式），这时事件处理函数里的this会指向触发事件的按钮元素。

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