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中。