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

希望这就是你所追求的。

Answer 2

在 jquery 中，您可以使用 next() 函数选择兄弟姐妹，该函数

$(this).next()

将选择下一个。

有关 next() 的更多信息