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"

其他插件评论：

如果您希望一次可以在多个元素上调用插件，请始终在插件中使用return this.each，因为插件中的this将包含与选择器匹配的整个元素集合（s ）。或者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');

Answer 2

window.onscroll = function(){
        var scrolled = $(window).scrollTop();
        elem.css('top',(defaultTop-(scrolled*speed))+'px');
      }

这不会添加新的回调，而是替换之前的回调，因此请尝试添加新事件，而不是替换它，

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

2 个答案: