Question

我使用以下代码来循环一组元素。

$(this).next().show().animate({top: '25px'},250,function(){
                $(this).addClass('active');
            });

但这是有限的，因为我需要到达元素列表的末尾，然后再循环，所以我写了这个插件：

(function($){
    $.fn.extend({
        rotater: function(class_check){
            return this.each(function(){
                if($(this).next().hasClass(class_check)){

                    return $(this).next();
                } else {

                    return $(this).parent().children().first();
                }
            });
        }
    });
})(jQuery);

为了检测我何时到达我想要的集合的末尾（它们共享一个共同的类），如果是，请抓住第一个再次开始整个循环的对象。

我将调用代码更改为：

$(this).rotater('common_class').show().animate({top: '25px'},250,function(){
                $(this).addClass('active');
            });

但它已经完全停止了！我很困惑，我可以理解，如果我的“返回开始”脚本失败了，但至少第一个周期应该与next()完全相同，因为我实际上返回了next()的值。

我的HTML看起来像：

<div id="parent>
  <div class="common_class"></div>
  <div class="common_class"></div>
  <div class="common_class"></div>
  <div class="common_class"></div>
  <div class="undesired_elemement"></div>
</div>

Answer 1

each 回调中的回复无效。你的rotator函数返回 each 返回的内容，这不是回调返回的内容，但它会再次返回this。

解决方案：请勿使用each：

(function($){
    $.fn.extend.rotater = function(class_check){
        if(this.next().hasClass(class_check)){
            return this.next();
        else {
            return this.parent().children().first();
        }
    }
})(jQuery);

如果要将功能应用于选择器所选的所有元素，则只需使用this.each。

如果选择了多个元素，您可能会遇到奇怪的行为。在这种情况下，您应该明确选择第一个元素：

var ele = this.eq(0);

插件无法正常工作

1 个答案: