1

我正在滚动我自己的轮播代码，（模仿位于此处http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery的精彩文章）但我遇到传入“this”选择器上下文时出现问题，但仅限于 slider.animate() 中。最初的 .before() 与 $("ul.slides li:first", this) 和 $("ul.slides li:last", this) 选择器一起使用，因为它在 .animate() 之外。

我有一个这样声明的 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 回答