Question

以下是我在jQuery中尝试实现的内容：我在HTML中依次显示多个英雄部分。每当英雄部分到达窗口顶部时，我想添加类“链接”，如果没有删除该类。

每个英雄部分都有类'视差'和ID'视差-1'，'视差-2'，'视差-3'等。

In [39]: s
Out[39]: '3136 -2 1806481261 191415576 883713178 259822501 0 79439 0 0 0'

In [40]: re.search(r'^(?:-?\d+\s+){5}(\d+)',  s).group(1)
Out[40]: '259822501'

JS代码：

<section class="parallax" id="parallax-1"></section>
<section class="parallax" id="parallax-2"></section>
<section class="parallax" id="parallax-3"></section>
...

因此上面的代码不起作用，这是浏览器控制台中的错误：

undefined不是对象（评估'$ div.offset（）。top'）

我完全不明白错误，因为每个ID都存在。谢谢你的帮助！

Answer 1

var target = $('.parallax').attr('id')将选择第parallax类的第一个元素，并将其id存储到目标中，即：parallax-1

创建div选择器时，您使用'#parallax'+target会导致#parallaxparallax-1，从而导致错误。只需将其更改为'#'+target，它就能正常工作，但仅适用于第一个section，因为您只对第一部分的代码执行此操作。

如果要对所有部分执行此操作，可以按以下方式使用JQuery.each。

＆＃13;

$('.parallax').each(function(){
    var target = $(this).attr('id'),
    $window = $(window);

    $window.on('load resize scroll',function(){
      var $div = $('#'+target);
      if ( $window.scrollTop() >= $div.offset().top ) {
        $div.addClass('link');
      } else if($div.hasClass('link')) {
          $div.removeClass('link');
      }
  });

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="parallax" id="parallax-1">1</section><br>
<section class="parallax" id="parallax-2">2</section><br>
<section class="parallax" id="parallax-3">3</section><br>
<section class="parallax" id="parallax-4">4</section><br>
<section class="parallax" id="parallax-5">5</section><br>
<section class="parallax" id="parallax-6">6</section><br>
<section class="parallax" id="parallax-7">7</section><br>
<section class="parallax" id="parallax-8">8</section><br>
<section class="parallax" id="parallax-9">9</section><br>
<section class="parallax" id="parallax-10">10</section><br>
<section class="parallax" id="parallax-11">11</section><br>
<section class="parallax" id="parallax-12">12</section><br>
<section class="parallax" id="parallax-13">13</section><br>
<section class="parallax" id="parallax-14">14</section><br>
<section class="parallax" id="parallax-15">15</section><br>
<section class="parallax" id="parallax-16">16</section><br>
<section class="parallax" id="parallax-17">17</section><br>
<section class="parallax" id="parallax-18">18</section><br>

＆＃13;

希望它有所帮助!!

动态获取ID并添加类

1 个答案: