簡化活性菜單jQuery代碼

Question

我想簡化此代碼：

$(window).on('DOMMouseScroll scroll mousewheel keydown', function() { 
    if ($('#home-section').hasClass('cd-section visible')) { 
     $('.li-underline').removeClass('active'); 
    } else if ($('#what-section').hasClass('cd-section visible')) { 
     $('.li-underline').removeClass('active'); 
     $('.li-width:first-child > li > .li-underline').addClass('active'); 
    } else if ($('#case-studies-section').hasClass('cd-section visible')) { 
     $('.li-underline').removeClass('active'); 
     $('.li-width:nth-child(2) > li > .li-underline').addClass('active'); 
    } else if ($('#team-section').hasClass('cd-section visible')) { 
     $('.li-underline').removeClass('active'); 
     $('.li-width:nth-child(3) > li > .li-underline').addClass('active'); 
    } else if ($('#clients-section').hasClass('cd-section visible')) { 
     $('.li-underline').removeClass('active'); 
     $('.li-width:nth-child(4) > li > .li-underline').addClass('active'); 
    } else if ($('#contact-section').hasClass('cd-section visible')) { 
     $('.li-underline').removeClass('active'); 
     $('.li-width:nth-child(5) > li > .li-underline').addClass('active'); 
    } 
}); 

由於是我basicaly一遍又一遍地重複相同的功能。

像這樣的工作？：

var activeSection = $('#what-section', 'team-section'); 

$(window).on('DOMMouseScroll scroll mousewheel keydown', function() { 
     activeSection.hasClass('cd-section visible') { 
      $('.li-underline').removeClass('active'); 
     } 

Answer 1

添加一個新的類，這些元素並通過選擇它們，所以：

$(window).on('DOMMouseScroll scroll mousewheel keydown', function() { 
    if ($('.newclass').hasClass('cd-section visible')) { 
     $(this).removeClass('active'); 
    } 

}

您可以添加多個類以下標籤：

<div class="one two three"></div> 

並選擇它們：

$('.two, .three').css('background',''yellow');