时间戳

首页 > 解决方案 > jQuery：如何将Class一一添加到循环中的元素

javascript - jQuery：如何将Class一一添加到循环中的元素

问题描述

我有一堆 10 个具有相同类“框”的 div。我试图达到的目标：

  1. 加载页面后，至少部分位于视口中的所有 div 都应该是可见的（addClass 'visible'）。完全超出视口的 Divs 应该是不可见的（不透明度 0.25 只是为了看看发生了什么）。
  2. 滚动时，每个 div 应该在进入视口底部边缘后立即接收到 class 'visible'，但只有当前 div，而不是所有 div。
  3. 收到“可见”类后，div 保持不变，离开视口后不应丢失类。

下面的代码在滚动之前什么都不做。因此，视口中的第一个 div 是不可见的，无论它是否部分（甚至完全）在视口中。滚动后，脚本将类“可见”添加到所有 div，而不是仅当前到达视口的 div。

解决问题的最佳方法是什么？

谢谢拉尔夫

$(window).scroll(function() {
  $(".box").each(function(index) {
    if ($(".box").isInViewport) {
      $(".box").eq($(this).index()).addClass("visible");
    }
  });
});

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
};
div.box { 
  width: 200px;
  height: 200px;
  background: crimson;
  margin-bottom: 20px;
  opacity: 0.25;
}

div.box.visible { opacity: 1.0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

标签： javascriptjquery

解决方案

在这里使用toggleClass()会有所帮助

$(".box").each(function(index) {
    var $box = $(this), // `this` is instance of .box
        isVisible = $box.isInViewport() // note this is a function!

    $box.toggleClass("visible", isVisible);
});

请注意，您从未调用过该isInViewport()函数

推荐阅读