jQuery如何通过重复代码提高效率

Question

当您滚动到100px以下时，我正在使用下面的代码块来淡入和淡出我的导航，同样，如果将鼠标悬停在其上，它也会随着应用和删除的某些类而淡入和淡出。 我的问题是如何将重复的代码行放在一个变量中，当满足条件时，只需使用该变量即可。

$(document).ready (function () {  
$(window).scroll (function () {
    var sT = $(this).scrollTop();
    if (sT >= 100) {
      $('header').addClass('fadeIn');
      $('.nav-collapse a').addClass('fadeInText');
      $('#blackLogo').removeClass('hide');
      $('#whiteLogo').addClass('hide');
      $('#whiteLogo').hide();
    }else {
      $('header').removeClass('fadeIn');
      $('.nav-collapse a').removeClass('fadeInText'); 
      $('#blackLogo').addClass('hide');
      $('#whiteLogo').removeClass('hide');
      $('#whiteLogo').show();
    }
})  


 var sT = $(this).scrollTop();
    if (sT >= 100) {
      $('header').addClass('fadeIn');
      $('.nav-collapse a').addClass('fadeInText');
      $('#blackLogo').removeClass('hide');
      $('#whiteLogo').addClass('hide');
      $('#whiteLogo').hide();
    }else {
      $('header').removeClass('fadeIn');
      $('.nav-collapse a').removeClass('fadeInText'); 
      $('#blackLogo').addClass('hide');
      $('#whiteLogo').removeClass('hide');
      $('#whiteLogo').show();
    }



  $("header").hover(function(){
      $('header').addClass('fadeIn');
      $('.nav-collapse a').addClass('fadeInText');
      $('#blackLogo').removeClass('hide');
      $('#whiteLogo').addClass('hide');
      $('#whiteLogo').hide();
  },function(){
      $('header').removeClass('fadeIn');
      $('.nav-collapse a').removeClass('fadeInText'); 
      $('#blackLogo').addClass('hide');
      $('#whiteLogo').removeClass('hide');
      $('#whiteLogo').show();
  }); 


})

我尝试了类似的方法，但无法解决。 也许我需要做一个物体？

var turnOn= 
      $('header').addClass('fadeIn');
      $('.nav-collapse a').addClass('fadeInText');
      $('#blackLogo').removeClass('hide');
      $('#whiteLogo').addClass('hide');
      $('#whiteLogo').hide();
var turnOff= 
      $('header').removeClass('fadeIn');
      $('.nav-collapse a').removeClass('fadeInText'); 
      $('#blackLogo').addClass('hide');
      $('#whiteLogo').removeClass('hide');
      $('#whiteLogo').show();

Answer 1

您可以为他们创建一个函数：

var turnOn= function(){
      $('header').addClass('fadeIn');
      $('.nav-collapse a').addClass('fadeInText');
      $('#blackLogo').removeClass('hide');
      $('#whiteLogo').addClass('hide');
      $('#whiteLogo').hide();
};
var turnOff= function(){
      $('header').removeClass('fadeIn');
      $('.nav-collapse a').removeClass('fadeInText'); 
      $('#blackLogo').addClass('hide');
      $('#whiteLogo').removeClass('hide');
      $('#whiteLogo').show();
};

然后在需要时调用turnOn / turnOff。

Answer 2

似乎您正在处理某种菜单或选项卡类型的结构，您需要在其中突出显示一个菜单项并隐藏其他菜单。

在这种情况下，最好都具有隐藏所有项目的通用功能，然后您可以在其他情况下仅显示所需的项目：-

hideAll();
if (sT >= 100) {
   turnOn();
  }else {
   turnOff();
 }


 function turnOn(){
 $('header').addClass('fadeIn');
  $('.nav-collapse a').addClass('fadeInText');
  $('#whiteLogo').addClass('hide');
  } 

 function hideAll(){
  $('header').removeClass('fadeIn');
  $('.nav-collapse a').removeClass('fadeInText');
  $('#blackLogo').removeClass('hide');
  $('#whiteLogo').removeClass('hide');
  $('#whiteLogo').hide();
 }

 function turnOff(){
 $('#blackLogo').addClass('hide');
  $('#whiteLogo').show();
  }

它将提供更多的模块化和简洁的代码。 将来，如果您有更多选项卡，则只需修改您的hideAll并为该选项卡创建新功能。 无需在每个功能中正确隐藏新标签的逻辑。 但是，如果您确定将来会只需要两个选项卡，那么最好只将组合代码置于turnOff和turnOn中。