Button绑定onClick点击事件仅首个元素触发生效问题咨询

问题原因 #

你调用document.querySelector(".part")时，该方法默认只会返回整个文档中第一个匹配class="part"的元素，所以无论点击哪个按钮，操作的永远是第一个区域。

修复方案 #

方案1：通过DOM层级定位对应元素（无需改标签ID，适配当前结构）

1. 调整模板中按钮的事件绑定，把当前点击的按钮实例传入函数：

<!-- Add按钮修改 -->
<button onClick="show(this)">Add</button>
<!-- Cancel按钮修改 -->
<button onClick="hide(this)">Cancel</button>

2. 修改JS逻辑，通过按钮所在的DOM层级找到对应的操作区域：

function show(btn) {
    // 获取当前Add按钮父容器的下一个相邻节点，就是对应的.part区域
    const targetPart = btn.parentElement.nextElementSibling;
    targetPart.style.display = "block";
}

function hide(btn) {
    // 直接向上查找最近的class为part的父节点，就是当前Cancel按钮所属的区域
    const targetPart = btn.closest(".part");
    targetPart.style.display = "none";
}

3. 新增基础CSS默认隐藏所有.part区域，避免初始状态全部显示：

.part {
    display: none;
    margin: 10px 0;
}

方案2：绑定唯一ID（更稳定，不受后续DOM结构调整影响）

如果后续你可能调整HTML结构，建议用每条数据的唯一ID标识对应区域：

1. 给.part区域加上唯一ID，用trail的主键拼接：

<div class="part" id="trail_part_{{trail.0}}">

2. 调整按钮的事件传参：

<button onClick="show({{trail.0}})">Add</button>
<button onClick="hide({{trail.0}})">Cancel</button>

3. 修改JS逻辑直接匹配ID：

function show(trailId) {
    document.getElementById(`trail_part_${trailId}`).style.display = "block";
}

function hide(trailId) {
    document.getElementById(`trail_part_${trailId}`).style.display = "none";
}

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