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

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

选择兄弟姐妹

$(this).next()

将选择下一个。

More on next()

Answer 2

只需查看代码，您就会在模糊时尝试再次执行初始化代码。是这样的吗？如果是这样，将该公共代码重构为一个函数，并简单地从事件处理程序中调用它：

(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语句中），因为赋值事件处理程序将适用于匹配元素集中的每个项目。 / p>

希望这就是你所追求的。

jQuery插件循环遍历兄弟姐妹

2 个答案: