Question

我正在滚动我自己的轮播代码，（以这里位于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（）之外。< / p>

我有一个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 this。）before（$（“ul.slides li：last”，this））;永远不会得到解决，但只能在.animate（）事件中解决。

非常感谢任何帮助。提前感谢您看一下。

Answer 1

尝试这种方式：

是的，动画内的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.

jQuery轮播“此”上下文未传递给.animate回调

1 个答案: