主页 / 问题 / 1482536
Accepted
marioizdendy
Asked:2022-12-30 22:10:07 +0000 UTC2022-12-30 22:10:07 +0000 UTC

JS querySelectorAll 为

  • 772

理论上，脚本应该在跨度中查找活动类，然后执行操作。

我为此使用 querySelectorAll，但据我所知，我需要循环才能完成 for，但它不起作用。

let div = document.querySelectorAll('#naviwka span');

if (div.classList.contains('active')) {
  div.scrollIntoView({
    inline: "center"
  });

} else {
  alert('Class does not exist');
}
<header class="example-one-header scroll">
  <nav class="vertical-align-middle" id="naviwka">
    <span class="nav-item">HOME</span>
    <span class="nav-item">ABOUT US</span>
    <span class="nav-item">POSSIBILITIES</span>
    <span class="nav-item">IMMERSE</span>
    <span class="nav-item">WHY OCTAGON?</span>
    <span class="nav-item active" id="nav_it">BUILD YOUR FUTURE</span>
  </nav>
</header>

javascript

1 个回答

  1. Best Answer

    querySelectorAll 返回 一个具有forEach方法的 NodeList。你可以像这样应用它：

    const spans = document.querySelectorAll('#naviwka span');

spans.forEach((span) => {
  if (span.classList.contains('active')) span.classList.add('sure');
  else console.log('Class does not exis');
});
    .nav-item.active.sure {
  color: red;
}
    <header class="example-one-header scroll">
  <nav class="vertical-align-middle" id="naviwka">
    <span class="nav-item">HOME</span>
    <span class="nav-item">ABOUT US</span>
    <span class="nav-item">POSSIBILITIES</span>
    <span class="nav-item">IMMERSE</span>
    <span class="nav-item">WHY OCTAGON?</span>
    <span class="nav-item active" id="nav_it">BUILD YOUR FUTURE</span>
  </nav>
</header>

    但是，如果您只需要找到具有类的元素active，那么您可以不使用循环并使用querySelector方法：

    const span = document.querySelector('#naviwka span.active');

span.classList.add('sure');
    .nav-item.active.sure {
  color: red;
}
    <header class="example-one-header scroll">
  <nav class="vertical-align-middle" id="naviwka">
    <span class="nav-item">HOME</span>
    <span class="nav-item">ABOUT US</span>
    <span class="nav-item">POSSIBILITIES</span>
    <span class="nav-item">IMMERSE</span>
    <span class="nav-item">WHY OCTAGON?</span>
    <span class="nav-item active" id="nav_it">BUILD YOUR FUTURE</span>
  </nav>
</header>

    • 1

相关问题