Question

布鲁斯怎么样？

我有代码想要在用户将页面滚动到元素位置时向元素添加一个类，并使用此代码：

  $(window).on('scroll',function(){
    Scroll = $(this).scrollTop();
        if(Scroll >= $('img').position().top)
        $('img').addClass('rotate');
  });

我的HTML代码是这样的：

<div class="some-class">
  <img src="http://blog.majidkn.com/wp-content/themes/majidkn2/images/mkn.png" class="feature-size">
</div>

<div class="some-class">
  <img src="http://blog.majidkn.com/wp-content/themes/majidkn2/images/mkn.png" class="feature-size">
</div>

<div class="some-class">
  <img src="http://blog.majidkn.com/wp-content/themes/majidkn2/images/mkn.png" class="feature-size">
</div>

现在，当我运行代码时，rotate类适用于所有img标记。但我想将rotate类添加到具有我在js if句中所述条件的元素中！

我现在可以做些什么呢？你也可以看到jsfiddle！

Answer 1

循环到所有img并使用$(this)添加类

$(window).on('scroll',function(){
    Scroll = $(this).scrollTop();
    $('img').each(function(){
    if(Scroll >= $(this).position().top)
        $(this).addClass('rotate');


      });

});

Answer 2

您可以使用jQuery的filter来仅获取符合您要求的图片代码，例如：

Scroll = $(this).scrollTop();
$('img').filter(function(index, el) {
    return Scroll >= el.position.top();
}).addClass('rotate');

Answer 3

用这个

替换你的if语句

$('img').each(function(index) {
 if(Scroll >= $(this).position().top)
    $(this).addClass('rotate');

}）;

Answer 4

$(window).on('scroll', function() {
  Scroll = $(this).scrollTop();
  $('img').each(function() {
    if (Scroll >= $(this).position().top)
      $(this).addClass('rotate');
  })


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some-class">
  <img src="http://blog.majidkn.com/wp-content/themes/majidkn2/images/mkn.png" class="feature-size">
</div>

<div class="some-class">
  <img src="http://blog.majidkn.com/wp-content/themes/majidkn2/images/mkn.png" class="feature-size">
</div>

<div class="some-class">
  <img src="http://blog.majidkn.com/wp-content/themes/majidkn2/images/mkn.png" class="feature-size">
</div>

遍历每个图像，然后使用this上下文告诉当前图像

addClass仅适用于没有特定类或ID的特定元素

4 个答案: