javascript - 如何使用 jquery 将类添加到仅匹配条件的一个元素？

Question

我正在尝试检查元素是否越过视口(viewport)的底部边缘。如果是这样，我想将类 start 添加到此元素。问题是当条件满足时，类添加到所有 h2 元素。

这是我的代码:

$.fn.checkAnimation = function() {

  var context = this;
  function isElementInViewport(elem) {
    var $elem = context;

    // Get the scroll position of the page.
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return (elemTop < viewportBottom);
  }

  // Check if it's time to start the animation.
  function checkAnimation() {
      console.log(isElementInViewport($elem));
      var $elem = context;

      // If the animation has already been started
      if ($elem.hasClass('start')) return;

      if (isElementInViewport($elem)) {
          // Start the animation
          context.addClass('start');
      }
  }
  checkAnimation();
  return this;
};
$(window).on('scroll scrollstart touchmove orientationchange resize', function(){
      $('h2').checkAnimation();
  });

Answer 1

您需要更改您的 checkAnimation jQuery 插件以循环遍历 jQuery 对象中的所有元素并单独处理它们或像这样调用您的函数

$('h2').each(function(){
    $(this).checkAnimation();
}

这就是我所说的在插件中单独处理元素的意思:

$.fn.checkAnimation = function() {

    function isElementInViewport($elem) {
        var viewportTop = $(window).scrollTop();
        var viewportBottom = viewportTop + $(window).height();

        var elemTop = Math.round( $elem.offset().top );
        var elemBottom = elemTop + $elem.height();

        return (elemTop < viewportBottom);
    }

    function checkAnimation() {
        var $elem = $(this);
        if ($elem.hasClass('start')) return;

        if (isElementInViewport($elem)) {
           $elem.addClass('start');
        }
     }
     return this.each(checkAnimation);
};

如果你使用这个版本的插件，你可以这样调用它:

$('h2').checkAnimation();

它只会将类添加到与条件匹配的元素，而不是您调用该函数的 jQuery 对象中的所有元素。