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

Question

I am using the below chunk of code to fade in and out my nav when you scroll below 100px, also if you hover over it, it will also fade in and out along with some classes applied and removed. My question is how can I place the repeating lines of code in a variable, and when the condition is met just use that variable.

$(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();
  }); 


})

I tried something like this but couldn't get it going. Maybe I need to make an object?

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

You can make a function for them:

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();
};

And then call the turnOn / turnOff when required.

Answer 2

It seems you are working on some menu or tab kind of strucutre, where you need to highlight one and hide other.

In such scenario, all better have common function to hide all the items, and then you can show only the item you need in your if else :-

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();
  }

It will provide more modular and clean code. And in future, if you have more tabs, you just need to modify your hideAll and create new function for that tab. No need to right hiding logic of new tab in your eachfunction. However, if you are sure in future, you are going to need only two tabs , then you better with only clubbing code in turnOff and turnOn