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()