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。请任何人帮助我为这个脚本工作20个具有ID block1，block2，block3，.....，block20的块

Answer 1

尝试修改您的方法。不使用id作为块，而是使用类，然后使用$ .each（）迭代它们。对于每个实例，您可以检查块是否已到达窗口顶部，然后使用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');
    }

如何使脚本动态化为块数

3 个答案: