如何简化此JQuery代码

时间:2016-05-30 18:22:35

标签: jquery styles simplify convention

这段代码对我来说完全没问题,当我在我页面的某个部分时突出显示导航栏的链接。

但我很确定,有一个更简单/更短的代码,它也是如此。 问题是,我只是将这些代码复制并粘贴在一起,因为我不知道JQuery是如何工作的。

任何人都可以给我一个如何简化此代码的提示吗?

  <!-- START-AREA -->
  $(function() {                     
      $('beginstart').waypoint(function() {
          $('#sec-start').addClass('active');
          $('#sec-info').removeClass('active');
          $('#sec-kontakt').removeClass('active');
          $('#sec-referenzen').removeClass('active');
          $('#sec-angebot').removeClass('active');
          $('#sec-impressum').removeClass('active');
      })});
  $('endstart').waypoint(function() {
      $('#sec-start').addClass('active');
      $('#sec-info').removeClass('active');
      $('#sec-kontakt').removeClass('active');
      $('#sec-referenzen').removeClass('active');
      $('#sec-angebot').removeClass('active');
      $('#sec-impressum').removeClass('active');
  }, {
      offset: 'bottom-in-view'
  }); 

这只适用于一个部分,但我有六部分,所以缩短它会很酷。

2 个答案:

答案 0 :(得分:1)

Combine the selector by comma separating,你也可以在两种情况下使用相同的功能。

<!-- START-AREA -->
$(function() {
  // define it as a function
  var fun = function() {
    $('#sec-start').addClass('active');
    $('#sec-info,#sec-kontakt,#sec-referenzen,#sec-angebot,#sec-impressum').removeClass('active');
  };
  // use the function reference  in both
  $('beginstart').waypoint(fun);
  $('endstart').waypoint(fun, {
    offset: 'bottom-in-view'
  });
});

答案 1 :(得分:1)

您可以将多个选择器与逗号

组合在一起
$(function() {                     
      $('beginstart').waypoint(function() {
          $('#sec-start').addClass('active');
          $('#sec-info, #sec-kontakt, #sec-referenzen, 
             #sec-angebot, #sec-impressum').removeClass('active');
      })});