jQuery插件循环通过兄弟姐妹

Question

我是新来编写jQuery插件，所以我有点不确定如何做到这一点。该插件将标签显示为文本和密码输入内的提示。这很简单 - 在元素焦点上，标签是隐藏的。同样在文档加载时，它会检查浏览器是否已自动完成任何字段格式 - 如果是，则隐藏该标签。我遇到的问题是其他字段的自动填充。为了解决这个问题，我试图将一个函数绑定到元素的onblur和keyup事件，以循环其他表单元素并确定它们是否已经自动完成。

这是注释的代码。

(function($){ 
    $.fn.innerLabels = function() { 
    return this.each(function() {   
    var $this = $(this); 
// Initialise all form elements with class 
    $this.each(function() { 
    var lngth = $(this).val().length; 
    if(lngth > 0){ 
     $(this).parent().children('label').hide(); 
    }else{ 
     $(this).parent().children('label').show(); 
    }; 
    }); 
// onfocus event - clears label 
    $this.focus(function() { 
    $this.parent().children('label').hide(); 
    }); 
// onblur/keyup event re-enstates label if length of value is zero or hides if autocompleted. 
    $this.bind("blur keyup",function() { 
// check all fields in case of autocomplete <- this is the problem 
    $(this).each(function() { 
    var lngth = $(this).val().length; 
    //alert(lngth); 
    if(lngth > 0){ 
     $(this).parent().children('label').hide(); 
    }else{ 
     $(this).parent().children('label').show(); 
    }; 
    }); 
    }); 
    }); 
    }; 
})(jQuery); 

这是通过这样做触发的。

$(document).ready(function(){ 
    $('.txtbox').innerLabels(); 
}); 

.txtbox是我添加的一个类，用于形成我想要使用它的文本和密码字段。

我认为这是一个范围问题。最后一个$（this）.each是问题所在。与使用.txtbox类循环所有元素不同，它循环处理发生事件的输入值。我不想将类名添加到插件中，因为它会添加额外的代码并使其不够灵活。

任何意见，将不胜感激。

干杯

格雷格

Answer 1

只要看你的代码，它看起来像你试图在模糊再次执行初始化代码。是这样吗？如果是这样，那重构普通代码的功能和简单地从你的事件处理程序调用它：

(function($) { 
    $.fn.innerLabels = function() { 
     var $self = this; 
     var hideElements = function() { 
      $self.each(function() { 
       var lngth = $(this).val().length; 
       if (lngth > 0) { 
        $(this).parent().children('label').hide(); 
       } else { 
        $(this).parent().children('label').show(); 
       }; 
      }); 
     }; 

     hideElements(); 

     return $self.focus(function() { 
      $(this).parent().children("label").hide(); 
     }).bind("blur keyup", hideElements); 
    }; 
})(jQuery); 

一些重构之后，我还没有看到为.each调用（在return语句）的需要，因为分配事件处理程序将适用于匹配元素集合中的每个项目。

希望这就是你以后的样子。

Answer 2

在jQuery中您可以使用next（）函数

$(this).next() 

将选择下一个选择的兄弟姐妹。

More on next()