jquery - 为多个实例定义我自己的 JQuery 函数

Question

我定义了一个 JQuery 函数，该函数由某个元素调用并添加一个事件监听器以进行滚动。

如果只有一个元素调用该函数，它会很好地工作，但如果多个元素调用该函数，则它仅适用于最后一个调用它的元素。让我添加一些代码更好地解释一下:

我的功能:

jQuery.fn.extend({
    objectParallax: function (speed) {
      var elem = $(this);
      var defaultTop = parseInt(elem.css('top'));
      window.onscroll=function(){
        var scrolled = $(window).scrollTop();
        elem.css('top',(defaultTop-(scrolled*speed))+'px');
      }
    }
});

这很简单，基本上它的作用就是使某些元素以不同的速度滚动。

我这样调用该函数:

$(function(){
     $('#floating-parallax-1').objectParallax('.5');
     //$('#floating-parallax-2').objectParallax('.5');
     //$('#floating-parallax-3').objectParallax('-.5');
     //$('#floating-parallax-4').objectParallax('-.5'); 
});

因此，在这种情况下(^)，它非常适合我的 #floating-parallax-1 对象。但是，如果我取消注释其他函数，我的函数仅适用于其中最后一个函数。请参阅:

$(function(){
     $('#floating-parallax-1').objectParallax('.5');
     $('#floating-parallax-2').objectParallax('.5');
     $('#floating-parallax-3').objectParallax('-.5');
     $('#floating-parallax-4').objectParallax('-.5'); 
});

这里(^)该函数仅适用于#floating-parallax-4项目。

如何使该函数能够同时拥有多个实例？

我很抱歉我的英语不好，如果有什么不清楚的地方请问我。感谢您的帮助!

Answer 1

问题是每次调用插件函数时都会覆盖window.onscroll。因此 window.onscroll 仅对插件初始化的最后一个元素有效，因为它是全局窗口属性

尝试使用 jQuery.on() 代替。

jQuery.fn.extend({
    objectParallax: function (speed) {
      var elem = $(this);
      var defaultTop = parseInt(elem.css('top'));
      $(window).on('scroll',function(){
        var scrolled = $(window).scrollTop();
        elem.css('top',(defaultTop-(scrolled*speed))+'px');
      });
    }
});

用这个简单的例子来思考

// first time plugin gets initialized
foo = function(){
   alert('One');
}
// next time it overwrites the previous `foo` instance with new one
foo = function(){
   alert('Two');
} 

foo()//alerts only "Two"

Additional plugin comments:

如果您希望插件能够一次在多个元素上调用，请始终在插件内使用return this.each，因为插件中的this将包含与选择器匹配的元素的整个集合。或者执行 this.each 并在最后返回 this 。正是 return this 让您可以进行方法链接

jQuery.fn.extend({
  objectParallax: function(speed) {
    var $window = $(window);
    // loop over all elements in collection
    return this.each(function() {
      var elem = $(this);
      var defaultTop = parseInt(elem.css('top'));
      $window.on('scroll', function() {
        var scrolled = $window.scrollTop();
        elem.css('top', (defaultTop - (scrolled * speed)) + 'px');
      });
    })
  }
});

然后您可以组合选择器，插件将在 each 循环内单独处理每个元素实例。

 $('#floating-parallax-1, #floating-parallax-2').objectParallax('.5');