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，我哪里出错了？

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