jQuery“.each()”函数仅将脚本应用于页面上的最后一个类

Question

如果导航当前悬停在具有浅色/白色背景的页面部分上以保持导航可见，我正在尝试创建一个脚本来更改导航栏的颜色。

我想改变布局如下的汉堡菜单的颜色：

<div id="nav_ham" onclick="openNav()">
    <span class=""></span>
    <span class=""></span>
    <span class=""></span>
    <span class=""></span>
</div> 

要更改跨度的颜色，我想添加一个类 ham_dark，它执行以下操作：

.ham_dark { background: #000!important;} 

我给白色背景一个 section_white 类并应用了以下代码：

//CHANGES COLOR OF NAV ON WHITE SECTIONS
function onScreen() {
    // Check if the top of the page collides with each section
    jQuery('.section_white').each(function() {
        var windowScroll = jQuery(document).scrollTop();
        var navHeight = jQuery('.nav').height();

    // Complex line checks if windowScroll (top of page) + nav bar hits Section Top / Bottom
        if( windowScroll + navHeight >= jQuery(this).offset().top && windowScroll + navHeight <= jQuery(this).offset().top + jQuery(this).height()) {
            // This section is active! Add Highlight
            console.log('working');
            jQuery('#nav_ham span').addClass('ham_dark')
        } else {
            // No - Remove highlight class
            jQuery('#nav_ham span').removeClass('ham_dark')
        }
    });
}

jQuery(window).on('scroll resize', function () {
    onScreen();
});

当导航悬停在所有 section_white 类上时，控制台正在记录“工作”，但是它仅将 addClass 应用于页面上的最终 section_white 类，而忽略所有其他类。

为什么 console.log 在所有类上触发，但只将 addClass 应用于 section_white 的最终实例？

我已经对此进行了模拟，但错误仍在发生（导航在最终的section_white div 上改变颜色，但不是第一个）：jsfiddle

谢谢

Answer 1

根据我的 cmets，一旦添加了暗类，您的循环就不会结束，因此会再次将其删除。试试这个（当类被添加到中断循环时返回 false）：

//CHANGES COLOR OF NAV ON WHITE SECTIONS
function onScreen() {
  // Check if the top of the page collides with each section
  $('.section_white').each(function() {
    var windowScroll = $(document).scrollTop();
    var navHeight = $('.nav').height();

    // Complex line checks if windowScroll (top of page) + nav bar hits Section Top / Bottom
    if (windowScroll + navHeight >= $(this).offset().top && windowScroll + navHeight <= $(this).offset().top + $(this).height()) {
      // This section is active! Add Highlight
      console.log('working');
      $('.cls-1').addClass('logo_dark');
      $('#nav_ham span').addClass('ham_dark')
      return false; // break loop
    } else {
      // No - Remove highlight class
      $('.cls-1').removeClass('logo_dark');
      $('#nav_ham span').removeClass('ham_dark')
    }

  });
}

$(window).on('scroll resize', function () {
    onScreen();
});

.nav {
  position: fixed;
  height: 10px;
}

.section_black {
  background: black;
  height: 300px;
}

.section_white {
  background: white;
  height: 300px;
}

.ham_dark { background: black!important; }

#nav_ham {
  width: 30px;
  height: 30px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav_ham span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav_ham span:nth-child(1) {
  top: 0px;
}

#nav_ham span:nth-child(2),
#nav_ham span:nth-child(3) {
  top: 8px;
}

#nav_ham span:nth-child(4) {
  top: 16px;
}

#nav_ham.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav_ham.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav_ham.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav_ham.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <div id="nav_ham" onclick="openNav()">
    <span class=""></span>
    <span class=""></span>
    <span class=""></span>
    <span class=""></span></div>
</div>
<div class="section_black">
  BLACK
</div>
<div class="section_white">
  WHITE
</div>
<div class="section_black">
  BLACK
</div>
<div class="section_white">
  WHITE
</div>
<div class="section_black">
  BLACK
</div>
<div class="section_black">
  BLACK
</div>