如何簡化代碼jQuery（$）。每個

Question

我在這裏剛剛開始學習JavaScript/jQuery，我有一些代碼，但我認爲它不是一個有效的代碼，它太長了，有點重複同樣的事情，你們也許可以製作一個更簡單的代碼版本？謝謝。

在這裏，我附上HTML圖像：

 var sections = $('.section-page'), 
      sp = $('.sp'), 
      sp2 = $('.sp2'), 
      sp3 = $('.sp3'); 

     $(window).on('scroll', function() { 
      var cur_pos = $(this).scrollTop(); 
      sections.each(function() { 
       var top = $(this).offset().top - nav_height, 
        bottom = top + $(this).outerHeight(); 
       if (cur_pos >= top && cur_pos <= bottom) { 
        nav.find('a').parent().closest('li').removeClass('current'); 
        nav.find('a[href="#'+$(this).attr('id')+'"]').parent().closest('li').addClass('current'); 
       } 
      }); 
      sp.each(function() { 
       var top = $(this).offset().top - nav_height, 
        bottom = top + $(this).outerHeight(); 
       if (cur_pos >= top && cur_pos <= bottom) { 
        nav.find('a').parent().closest('li').removeClass('current'); 
        $('#cssmenu > ul > li:nth-child(7)').addClass('current'); 
       } 
      }); 
      sp2.each(function() { 
       var top = $(this).offset().top - nav_height, 
        bottom = top + $(this).outerHeight(); 
       if (cur_pos >= top && cur_pos <= bottom) { 
        nav.find('a').parent().closest('li').removeClass('current'); 
        $('#cssmenu > ul > li:nth-child(6)').addClass('current'); 
       } 
      }); 
      sp3.each(function() { 
       var top = $(this).offset().top - nav_height, 
        bottom = top + $(this).outerHeight(); 
       if (cur_pos >= top && cur_pos <= bottom) { 
        nav.find('a').parent().closest('li').removeClass('current'); 
        $('#cssmenu > ul > li:nth-child(3)').addClass('current'); 
       } 
      }); 
     }); 

Answer 1

您可以創建爲重複4次的代碼的功能 - 有一些變化，你可以通過參數傳遞給該函數包括：

var sections = $('.section-page'), 
    sp = $('.sp'), 
    sp2 = $('.sp2'), 
    sp3 = $('.sp3'); 

$(window).on('scroll', function() { 
    var cur_pos = $(this).scrollTop(); 

    function setCurrent(elem, child) { 
     elem.each(function() { 
      var top = $(this).offset().top - nav_height, 
       bottom = top + $(this).outerHeight(); 
      if (cur_pos >= top && cur_pos <= bottom) { 
       nav.find('a').parent().closest('li').removeClass('current'); 
       var li = child !== undefined 
        ? $('#cssmenu > ul > li:nth-child(' + child + ')') 
        : nav.find('a[href="#'+$(this).attr('id')+'"]').parent().closest('li'); 
       li.addClass('current'); 
      } 
     }); 
    } 

    setCurrent(sections); // second argument not passed => undefined child 
    setCurrent(sp, 7); 
    setCurrent(sp2, 6); 
    setCurrent(sp3, 3); 
}); 

Answer 2

優化這種方式，並記住它，

$(window).on('scroll', function() { 
    var sections = $('.section-page'), 
     sp = $('.sp'), 
     sp2 = $('.sp2'), 
     sp3 = $('.sp3'); 

    var cur_pos = $(this).scrollTop(); 
    sections.each(function() { 
     var top = $(this).offset().top - nav_height, 
       bottom = top + $(this).outerHeight(); 
     if (cur_pos >= top && cur_pos <= bottom) { 
      nav.find('a').parent().closest('li').removeClass('current'); 
      nav.find('a[href="#' + $(this).attr('id') + '"]').parent().closest('li').addClass('current'); 
     } 
    }); 
    $(".sp,.sp2,.sp3").each(function() { 
     var cur_class = ($(this).hasClass("sp") ? "sp" : ($(this).hasClass("sp2") ? 'sp2') : 'sp3'); 
     var top = $(this).offset().top - nav_height; 
     bottom = top + $(this).outerHeight(); 
     if (cur_pos >= top && cur_pos <= bottom) { 
      nav.find('a').parent().closest('li').removeClass('current'); 
      switch (cur_class) { 
       case "sp": 
        $('#cssmenu > ul > li:nth-child(7)').addClass('current'); 
        break; 
       case "sp2" : 
        $('#cssmenu > ul > li:nth-child(6)').addClass('current'); 
        break; 
       case "sp3": 
        $('#cssmenu > ul > li:nth-child(3)').addClass('current'); 
        break; 
      } 
     } 
    }); 

}); 

試試看吧，這應該工作。