Question

我试图检查元素是否越过了视口的下边缘。如果是，我想在此元素中添加类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对象中的所有元素。

Answer 2

应改为$elem.addClass('start');并删除var $elem = context;语句，如：

function checkAnimation() {
  console.log(isElementInViewport($elem));

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

  if (isElementInViewport($elem)) {
      // Start the animation
      $elem.addClass('start');
  }
}

希望这有帮助。

Answer 3

jQuery插件中的

this是jQuery对象，它包含前一个选择器/过滤器所代表的整个元素集合。

为了将集合中的每个元素视为单个实例，您需要遍历最初的this。

非常基本的模式：

$.fn.pluginName = function(options){
      // return original collection as jQuery to allow chaining
      // loop over collection to access individual elements
      return this.each(function(i, elem){
           // do something with each element instance 
           $(elem).doSomething(); // elem === this also               
      });
}

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

3 个答案: