jQuery多按钮同ID问题：点击仅触发id=1元素如何解决？

这个问题太常见了！核心原因很简单：HTML规范里明确要求id必须是页面唯一的，浏览器的getElementById方法只会返回第一个匹配到的元素——所以不管你点哪个按钮，实际触发的都是页面中第一个id为1的元素的事件，自然只有第一条记录会更新。

下面给你一套具体的修复方案：

步骤1：把重复的ID换成Class #

先修改你的HTML，把所有按钮的重复id属性换成class，同时给每个按钮加上data-id属性来存储对应记录的唯一标识（比如原来的记录ID）：

<!-- 原来的错误写法 -->
<button id="updateBtn">更新</button>
<button id="updateBtn">更新</button>

<!-- 修改后的正确写法 -->
<button class="updateBtn" data-id="1">更新</button>
<button class="updateBtn" data-id="2">更新</button>

如果你的输入框也用了重复id，同样要换成class，比如：

<input class="recordInput" type="text" value="原有内容">

步骤2：修改JS事件绑定逻辑 #

不要用getElementById去绑定单个元素，而是用querySelectorAll选中所有按钮，然后循环给每个按钮绑定点击事件，同时通过DOM关系找到对应行的输入框：

// 选中所有更新按钮
const updateButtons = document.querySelectorAll('.updateBtn');

// 循环绑定点击事件
updateButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 获取当前按钮对应的记录ID（从data-id属性取）
    const recordId = this.dataset.id;
    
    // 找到当前按钮所在容器内的输入框（这里假设按钮和输入框在同一<tr>里，可根据你的DOM结构调整）
    const inputField = this.closest('tr').querySelector('.recordInput');
    const newContent = inputField.value.trim();
    
    // 这里执行你的更新逻辑，比如发送请求或者修改页面内容
    console.log(`正在更新记录ID ${recordId}，新内容：${newContent}`);
    // 示例：如果是更新页面显示，可直接操作对应元素
    // this.closest('tr').querySelector('.recordContent').textContent = newContent;
  });
});

关键逻辑解释 #

• querySelectorAll('.updateBtn')：能获取页面中所有class为updateBtn的按钮，不会像id那样只取第一个。
• this：在点击事件里指代当前被点击的按钮，这样就能区分用户点的是哪一个。
• dataset.id：通过自定义的data-id属性存储记录ID，避免用重复id传递标识。
• closest('tr')：向上查找最近的父级<tr>元素（可根据你的实际DOM结构换成div或其他容器），确保找到的是当前按钮对应的那条记录的输入框，不会混淆其他行的内容。

这样修改后，不管点击哪个按钮，都会触发对应记录的更新操作，不会再出现只有第一条生效的问题啦！

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