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

我定义了一个由某个元素调用的JQuery函数，并添加了一个事件侦听器来滚动。为多个实例定义我自己的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项目。

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

对不起，我的英语不好，如果有什么不够清楚，请问我。谢谢你的帮助！

来源

2016-05-29 pablito.aven

你可以共享一个小提琴？ – Rayon

问题是每次调用插件函数时都会覆盖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将包含匹配选择器的所有元素集合。或者做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');

来源

2016-05-29 03:05:41 charlietfl

工程就像一个魅力！也感谢你让我的函数能够处理多个选择器匹配的建议，但我不知道这一点。谢谢！ –

没问题...可以嵌入到插件中的很多其他模式，但是现在您已经具备了基础知识，可以将快速代码放在一起......并允许它们链接到其他jQuery方法 – charlietfl

如果您不介意，你会检查这个吗？ http://stackoverflow.com/questions/37513803/jquery-custom-plugin-function-validate-options谢谢！ –

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

这会不会增加新的回调，但代替以前的一个，所以尝试添加新的事件，而不是取代它，

来源

2016-05-29 03:06:43

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

回答

相关问题