Question

我正在寻找一些关于在一个javascript语句中有2-3个for循环的建议，以找到具有特定类的元素，然后添加和删除类。我对javascript很新，所以请耐心等待。

到目前为止，我的工作方式仍然有效，但我还是不想养成不良习惯。作为一个例子，我有一个导航链接，其中有一个类 - 肯尼亚，还有另一个元素具有相同的类，当点击这两个元素中的任何一个时，我想要发生同样的事情，这将是添加一个活跃的 - section class to kenya。

第一个for循环将查找具有类名称的所有元素 - kenya并向其添加单击侦听器。如果这两个元素都没有活动的那个 - 那么它会运行另一个for循环来查找所有具有一个名为active - section的类的部分，如果它有类，则删除它。然后第三个for循环运行检查所有导航链接以查找与活动链接类的链接，然后删除它（如果有）。一旦完成，我只需在我的新活动导航链接中添加一个类，并将active-section类添加到现在活动的部分。

希望这是有道理的，我只是在寻找最干净的方法。

 <main class="main__wrapper">

  <nav class="navigation">
    <div class="navigation__inner">
      <div class="navigation__logo">
        <a href="#" class="navigation__logo--text">Safari</a>
      </div>
      <ul class="navigation__destinations">
        <li class="navigation__destinations--item">
          <a href="#" class="navigation__link to--home active--link">Home</a>
        </li>
        <li class="navigation__destinations--item">
          <a href="#" class="navigation__link navigation__link--kenya to--kenya">Kenya</a>
        </li>
        <li class="navigation__destinations--item">
          <a href="#" class="navigation__link to--botswana">Botswana</a>
        </li>
        <li class="navigation__destinations--item">
          <a href="#" class="navigation__link to--south-africa">South Africa</a>
        </li>
        <li class="navigation__destinations--item">
          <a href="#" class="navigation__link to--zambia"></a>
        </li>
      </ul>
      <ul class="navigation__list">
        <li class="navigation__item">
          <a href="#" class="navigation__link to--contact">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

<div class="up__next">
      <div class="up__next__box up__next--kenya to--kenya up__next__box--active">
        <div class="up__next__content">
          <div class="up__next__info">
            <h4 class="up__next__heading">Next</h4>
            <span class="up__next__text">Kenya - Maasai Mara National Reserve</span>
          </div>
        </div>
        <div class="up__next__img">
          <div class="up__next__img--kenya"></div>
        </div>
      </div>
</div>

  <section class="home sections active--section">
    <div class="home__info__box">
      <h2 class="heading__primary home__heading--primary">Heading</h2>
      <span class="home__info__box--text">text</span>
    </div>
  </section>

  <section class="kenya sections">
    <div class="kenya__info__box">
      <h2 class="heading__primary kenya__heading--primary">Masai Mara</h2>
      <span class="kenya__info__box--text">text</span>
    </div>
  </section>
</main>


//Global variables

var sections = document.querySelectorAll('.sections');
var navLink = document.querySelectorAll('.navigation__link');
var navHome = document.querySelector('.navigation__link--home');
var navKenya = document.querySelector('.navigation__link--kenya');
var home = document.querySelector('.home');
var kenya = document.querySelector('.kenya');
var toKenya = document.querySelectorAll('.to--kenya');
var upNextKenya = document.querySelector('.up__next--kenya');


//Event listeners

for (var i = 0; i < toKenya.length; i++) {
    toKenya[i].addEventListener('click', function () {
        if (!kenya.classList.contains('active--section')) {
            for (var s = 0; s < sections.length; s++) {
                sections[s].classList.remove('active--section');
            }
            for (var l = 0; l < navLink.length; l++) {
                navLink[l].classList.remove('active--link');
            }
            kenya.classList.add('active--section');
            navKenya.classList.add('active--link');
            upNextKenya.classList.remove('up__next__box--active');
        }
    });
}

合并多个for循环以删除点击

0 个答案: