Как получить доступ к определенному одному классу из нескольких классов в JS нажатием кнопки - PullRequest
Новая
       89

Как получить доступ к определенному одному классу из нескольких классов в JS нажатием кнопки

1 голос
/ 30 апреля 2020

У меня есть определенные сомнения относительно того, как получить доступ к одному элементу из нескольких имен классов в 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. Может ли кто-нибудь помочь мне в этом вопросе? Я полностью поражен этой одной проблемой.

1 Ответ

0 голосов
/ 30 апреля 2020

Если структура всегда одинакова, вы можете просто использовать 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 s .closest(). Вы можете реализовать нечто подобное, используя al oop или рекурсивную функцию и 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>
...