如何使腳本動態的塊數

Question

我已經寫了一個塊的腳本，在其中添加和刪除活動類。我想讓這個腳本在不重複腳本的情況下工作20塊以上。

$(window).scroll(function(e){ 
      var targetTop = $("#block3").offset().top-80; 
      if ($(window).scrollTop() >= targetTop) { 
      $('ul.bxslider li a').removeClass('active'); 
      $('ul.bxslider li a[href="#block3"]').addClass('active'); 
      } 
      else{ 
      $('ul.bxslider li a[href="#block3"]').removeClass('active'); 
      } 

      var targetTop = $("#block4").offset().top-80; 
      if ($(window).scrollTop() >= targetTop) { 
      $('ul.bxslider li a').removeClass('active'); 
      $('ul.bxslider li a[href="#block4"]').addClass('active'); 
      } 
      else{ 
      $('ul.bxslider li a[href="#block4"]').removeClass('active'); 
      } 
     } 

上述腳本適用於block3和block4。請誰能幫助我工作的這個腳本有ID的塊1，塊2，塊3，...... 20個多塊，BLOCK20

Answer 1

嘗試修改你的方法。使用類，然後使用$ .each（）遍歷它們，而不是使用id作爲塊。對於每個實例，您可以檢查該塊是否已到達窗口的頂部，然後使用該ID來操縱正確的錨標記。像這樣：

$(window).scroll(function(e){ 
    $('.blockClass').each(function(index, element){ 
     var targetTop = $(element).offset().top-80; 
     var id = $(element).attr('id'); 
     if ($(window).scrollTop() >= targetTop) { 
      $('ul.bxslider li a').removeClass('active'); 
      $('ul.bxslider li a[href="#' + id + '"]').addClass('active'); 
     } 
     else { 
      $('ul.bxslider li a[href="#' + id + '"]').removeClass('active'); 
     } 
    }); 
} 

Answer 2

使該腳本的功能，並通過ID到它像

function blockCode(ID){ 
var targetTop = $("#"+ID).offset().top-80; 
      if ($(window).scrollTop() >= targetTop) { 
      $('ul.bxslider li a').removeClass('active'); 
      $('ul.bxslider li a[href="#'+ID+'"]').addClass('active'); 
      } 
      else{ 
      $('ul.bxslider li a[href="#'+ID+'"]').removeClass('active'); 
      } 
} 


blockCode('block4') 

Answer 3

只是傳遞塊到這個功能：

process("#block3"); 


    function process(block){ 
     block = $(block); 
     var targetTop = block.offset().top-80; 
     $('ul.bxslider li a').removeClass('active'); 
     if ($(window).scrollTop() < targetTop) block.addClass('active'); 
    }