点击关联按钮如何获取对应class为quan的input元素？

要实现点击按钮时获取与之关联的.quan输入框，核心思路是基于按钮的DOM位置，在其所属的局部容器内查找目标元素，而非全局匹配第一个.quan。

步骤1：修正HTML语法错误 #

原HTML存在标签未闭合、引号缺失问题，先修正：

<!-- 可以复制多组该容器测试多元素场景 -->
<div class="item-group">
     <div>
           <button onclick="handleClick(event)">Click</button>
     </div>

     <div>
          <input class="quan" type="number" min="0" value="2"/>
     </div>
</div>

<div class="item-group">
     <div>
           <button onclick="handleClick(event)">Click 2</button>
     </div>

     <div>
          <input class="quan" type="number" min="0" value="5"/>
     </div>
</div>

步骤2：编写目标关联的JavaScript逻辑 #

通过事件对象定位按钮，再向上找到其所属的容器，最后在容器内查找对应.quan元素：

function handleClick(event) {
  // 获取当前点击的按钮元素
  const currentBtn = event.currentTarget;
  // 向上查找最近的容器（这里用自定义类名更精准，避免和其他div混淆）
  const parentGroup = currentBtn.closest('.item-group');
  // 在当前容器内查找目标input
  const targetInput = parentGroup.querySelector('.quan');
  
  console.log(targetInput);
}

替代方案（结构固定时可用） #

如果按钮和输入框的层级关系永远固定，也可以直接通过父节点遍历定位：

function handleClick(event) {
  const targetInput = event.currentTarget.parentNode.parentNode.querySelector('.quan');
  console.log(targetInput);
}

关键说明 #

• closest()方法会向上查找最近的匹配元素，比硬写多层parentNode更灵活，即使未来容器层级微调也能适配。
• 给外层容器加自定义类名（如.item-group），可以避免页面其他无关div干扰查找逻辑。

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