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

您似乎正在处理一些菜单或标签类型的结构，您需要突出显示一个并隐藏其他结构。

在这种情况下，所有人都有更好的隐藏所有项目的功能，然后你只能在你的if中显示你需要的项目： -

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中的夜总会代码

jQuery如何更有效地重复代码

2 个答案: