1

私は自分のカルーセルコードを展開しています（ここにある素晴らしい記事をモデルにしていますhttp://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery）が、遭遇しています「this」セレクター コンテキストを渡すときの問題ですが、slider.animate() 内でのみ発生します。最初の .before() は、.animate() の外にあるため、$("ul.slides li:first", this) および $("ul.slides li:last", this) セレクターで動作します。

次のように宣言されたjQueryプラグインがあります。

$.fn.promoSlider = function(opts) {
    $(this).data('initialized', true);

    var speed = 400;
    var item_width = 274.5;
    var left_value = item_width * (-1);

    var slider =  $("ul.slides", this);

    //'this' works
    $("ul.slides li:first", this).before($("ul.slides li:last", this));
    slider.css({'left' : left_value});

    $('.btnprev', this).click(function() {
        var left_indent = parseInt(slider.css('left')) + item_width;

        slider.animate({'left' : left_indent}, speed, function() {
            //'this' does not work
            $("ul.slides li:first", this).before($("ul.slides li:last", this));
            slider.css({'left' : left_value});
        });
        return false;
    });

    $('.btnnext', this).click(function() {
        var left_indent = parseInt(slider.css('left')) - item_width;

        slider.animate({'left' : left_indent}, speed, function() {
            //'this' does not work
            $("ul.slides li:last", this).after($("ul.slides li:first", this));
            slider.css({'left' : left_value});
        });
        return false;
    });
}

次に、カルーセルを初期化し、次のように「this」をプラグインに渡します。

        $('.carousel').each(function() {
            if($(this).data('initialized') !== true) {
                $(this).promoSlider();
            }
        });

セレクターコンテキスト「this」は .animate() 内で失われ、「this」を匿名コールバック関数に渡すことはできません。したがって、 $("ul.slides li:first", this).before($("ul.slides li:last", this)); .animate() イベント内でのみ解決されます。

どんな助けでも大歓迎です。ご覧いただきありがとうございます。

4

1 に答える 1

0

この方法を試してください：

はい、this アニメーション内のコンテンツはスライダーのコンテンツになります。そのため、コンテキストを別の変数に設定して、コールバック内でアクセスできます。

 var $this = this; //Set up the context to a variable here
  slider.animate({'left' : left_indent}, speed, function() {
            $("ul.slides li:first", $this).before($("ul.slides li:last", $this)); // access it.
            slider.css({'left' : left_value});
        });

$.proxyを使用して、コールバック関数を特定のコンテキストに設定することもできます。

slider.animate({'left' : left_indent}, speed, $.proxy(function() { //Set up the proxy for callback
                $("ul.slides li:first", $this).before($("ul.slides li:last", $this)); // access it.
                slider.css({'left' : left_value});
            },this)); //Set the context. now withinthe animate callbnack this will refer to the context you pass here.
于 2013-06-19T00:59:24.063 に答える