Плагин 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()

выберет следующий.

Подробнее о следующем ()