爲多個實例定義我自己的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函數

回答

相關問題