複数のインスタンスに対して独自のJQuery関数を定義する

Question

私はいくつかの要素によって呼び出されるJQuery関数を定義し、スクロールするイベントリスナーを追加しました。

1つの要素だけがその関数を呼び出すとうまくいきますが、複数の要素があれば、呼び出された最後の要素に対してのみ機能します。私はいくつかのコードを追加し、より良いそれを説明してみましょう：

My機能：

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" 

追加プラグインのコメント：あなたがに複数の要素で呼び出すことができるようにするプラグインの場合

プラグインのthisには、セレクタに一致する要素のコレクション全体が含まれているので、プラグインの内部では常にreturn this.eachを使用してください。または、this.eachを実行し、最後にthisを返します。それはあなたが次にあなたがセレクタを組み合わせることができ、プラグインがeachループ内で個別に各要素のインスタンスを扱います

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'); 
     }); 
    }) 
    } 
}); 

を連鎖方法を行うことができますことreturn thisです。

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

Answer 2

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

これはあなたがフィドルを共有することができ