Wie man Code vereinfacht jQuery ($) .each

Question

Ich bin neu hier und fange gerade an, über javascript/jQuery zu lernen, ich habe einige Codes, die ich gemacht habe, aber ich denke, es ist nicht eine effektive, es ist zu lang und wiederholen irgendwie die Oder könntest du vielleicht eine einfachere Codeversion von diesem erstellen? Vielen Dank.

Hier lege ich die HTML-Bild:

 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

Sie könnten eine Funktion für den Code erstellen, die 4-mal wiederholt wird - mit einigen Variationen, die Sie, indem Argumente dieser Funktion abdecken: von

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

optimieren auf diese Weise, und daran erinnern,

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

}); 

Probieren Sie es, diese funktionieren sollte.