时间戳

首页 > 解决方案 > 如何通过单击按钮从 JS 中的多个类中访问某个类

javascript - 如何通过单击按钮从 JS 中的多个类中访问某个类

问题描述

我对如何从 JavaScript 中的多个类名访问一个元素有一定的疑问。例如，这是我的代码。

<html>
<head><title>Check</title>
</head>
<body>
<div class="div"><button type ="submit">a</button></div>
<div class="div"><button type ="submit">b</button></div>
<div class="div"><button type ="submit">c</button></div>
</body>
</html>

当我单击 b 的按钮时，我希望选择第二个 div 类。谁能帮我解决这个问题？我对这个问题完全感到震惊。

标签： javascripthtmlgetelementsbyclassname

解决方案

如果结构始终相同，则可以使用Node.parentElement到达那里，从引用开始<button>：

document.addEventListener('click', ({ target }) => {
  if (target.tagName !== 'BUTTON') return;
  
  console.log(target.parentElement.outerHTML);  
});
<div class="div"><button type ="submit">a</button></div>
<div class="div"><button type ="submit">b</button></div>
<div class="div"><button type ="submit">c</button></div>

或者，如果不同按钮的结构可能不同，则需要类似 jQuery 的.closest(). 您可以使用循环或递归函数来实现类似的功能，Element.matches()如果您不使用 jQuery：

function closest(element, selector) {  
  if (!element || element === document) return null;
  
  if (element.matches(selector)) return element;
  
  return closest(element.parentElement, selector);
}

document.addEventListener('click', ({ target }) => {
  if (target.tagName !== 'BUTTON') return;
  
  console.log(closest(target, '.div').outerHTML);  
});
<div class="div"><button type ="submit">a</button></div>
<div class="div"><span><button type ="submit">b</button></span></div>
<div class="div"><span><span><button type ="submit">c</button></span></span></div>

推荐阅读