动态获取ID并添加类

Question

下面是我试图在jQuery中实现的目标:我在HTML中一个接一个地显示了多个英雄部分。每次英雄部分到达窗口顶部时，我都想添加类“链接”，如果不是删除该类的话。

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

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

JS代码：

var target = $('.parallax').attr('id'),
    $window = $(window);

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

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

未定义的对象不是对象(计算'$div.offset().top')

我不明白到底是什么错了，因为每个ID都存在。谢谢你的帮助!

Answer 1

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

当您创建div选择器时，您使用的是'#parallax'+target，这会导致#parallaxparallax-1，从而导致错误。只需将其更改为'#'+target，它就可以正常工作，但只适用于第一个section，因为您只在第一部分的代码中这样做。

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

​

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

})

<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>

​

希望能帮上忙！