javascript - 获取具有类的下一个元素(不是子元素或兄弟元素)

Question

按下一个按钮，我想在下一个 div.bottom 上切换类 .active。这些基本上是 Accordion ，但结构不同。
使用 nextElementSibling 我想在这里无法选择目标元素。如何选择这样一个元素，它既不是子元素也不是兄弟元素(在普通 JS 中)？

<div class="wrapper">
  <div class="top">
    <div class="inner">
      <div><button></button></div>
    </div>
  </div>
  <div class="bottom"></div>
</div>

<div class="wrapper">
  <div class="top">
    <div class="inner">
      <div><button></button></div>
    </div>
  </div>
  <div class="bottom"></div>
</div>

Answer 1

我会使用 closest 来做到这一点转到容器 .wrapper 元素，然后是 querySelector找到 bottom 元素:

function onClick(event) {
    const wrapper = event.target.closest(".wrapper");
    const bottom = wrapper && wrapper.querySelector(".bottom");
    if (bottom) {
        bottom.classList.toggle("active");
    }
}

实例:

// I've added event delegation here
document.body.addEventListener("click", function onClick(event) {
    const button = event.target.closest(".inner button");
    const wrapper = button && button.closest(".wrapper");
    const bottom = wrapper && wrapper.querySelector(".bottom");
    if (bottom) {
        bottom.classList.toggle("active");
    }
});

.active {
    color: blue;
    border: 1px solid black;
}

<div class="wrapper">
        <div class="top">
                <div class="inner">
                        <div><button>Button A</button></div>
                </div>
        </div>
        <div class="bottom">Bottom A</div>
</div>

<div class="wrapper">
        <div class="top">
                <div class="inner">
                        <div><button>Button B</button></div>
                </div>
        </div>
        <div class="bottom">Bottom B</div>
</div>

或者使用可选链(相对较新)的相同事物:

function onClick(event) {
    const wrapper = event.target.closest(".wrapper");
    const bottom = wrapper?.querySelector(".bottom");
    bottom?.classList.toggle("active");
}

实例:

// I've added event delegation here
document.body.addEventListener("click", function onClick(event) {
    const button = event.target.closest(".inner button");
    const wrapper = button?.closest(".wrapper");
    const bottom = wrapper?.querySelector(".bottom");
    bottom?.classList.toggle("active");
});

.active {
    color: blue;
    border: 1px solid black;
}

<div class="wrapper">
        <div class="top">
                <div class="inner">
                        <div><button>Button A</button></div>
                </div>
        </div>
        <div class="bottom">Bottom A</div>
</div>

<div class="wrapper">
        <div class="top">
                <div class="inner">
                        <div><button>Button B</button></div>
                </div>
        </div>
        <div class="bottom">Bottom B</div>
</div>