javascript - JavaScript .closest 返回 null

Question

我有以下简单的布局，我无法更改。我正在尝试使用 JavaScript 来获取extra最接近按下的按钮的元素

在另一个问题的帮助下，我能够让这preventDefault部分工作，但现在我正在努力closest

<div class="buttons">
    <div class="button">
        <button class="myButton">Click Me</button>
        <div class="extra">64736</div>
    </div>
    <div class="button">
        <button class="myButton">Click Me</button>
        <div class="extra">5446</div>
    </div>
    <div class="button">
        <button class="myButton">Click Me</button>
        <div class="extra">78667</div>
    </div>
</div>

document.querySelector('.myButton').addEventListener('click', myFunction);

function myFunction() {

    event.preventDefault();

    close = this.closest(".extra"); 

    console.log(close)

}

但是null当我按下按钮时，这给了我，我哪里出错了？

标签： javascript

Answer 1

closest和的组合querySelector可以使用：

document.querySelectorAll('.myButton').forEach(function(button) {
  button.addEventListener('click', myFunction);
});

function myFunction(evt) {
  evt.preventDefault();

  var closest = evt.currentTarget.closest(".button").querySelector('.extra');

  console.log(closest)

}

<div class="buttons">
  <div class="button">
    <button class="myButton">Click Me</button>
    <div class="extra">64736</div>
  </div>
  <div class="button">
    <button class="myButton">Click Me</button>
    <div class="extra">5446</div>
  </div>
  <div class="button">
    <button class="myButton">Click Me</button>
    <div class="extra">78667</div>
  </div>
</div>

更多信息：

• https://developer.mozilla.org/en-US/docs/Web/API/Element/closest https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector