Использование Jquery each () и children () для обхода и скрытия / фокусирования элементов формы

Question

Я пытаюсь написать простой скрипт, который эмулирует заполнители, чтобы я мог использовать эффект во всех браузерах.То, что я настроил, - это форма с пролетом, содержащим текст, который я абсолютно позиционирую над вводом.Это действует как заполнитель текста.

Теперь Jquery достаточно прост, и если я выписываю отдельные функции для каждого элемента ввода, я получаю, что он работает нормально, но это отчасти избыточно.То, что я пытаюсь сделать, - это использовать each () и children () и классы, чтобы я мог применить это к любой форме, которую я хочу.Вот код:

<form id="signupForm" name="signupForm">
    <span class="inputSpan">
        <input value="" class="input" name="fistName" id="firstName" type="text" />
        <span class="inputText" id="inputText">First name</span>
    </span>
    <span class="inputSpan">
        <input value="" class="input" name="lastName" id="lastName" type="text" />
        <span class="inputText" id="inputText">Last name</span>
    </span>
</form>

<script type="text/javascript">
    $('.inputSpan').each(function() {
        $(this).children('.inputText').click(function(index) {
            $(this).children('.inputText').hide();
            $(this).children('.input').focus();
        });
    });
</script>

Если я помещаю оператор оповещения в каждую функцию, она работает, но не выполняет остальную часть, которая скрывает дочерний класс .inputText и фокусируется наДругой дочерний объект '.input' Я ​​предполагаю, что это как-то связано с невозможностью повторного вызова $ (this) внутри функции.У кого-нибудь есть идеи, как мне заставить это работать?

Решено !!!Спасибо, Мэтт Вот последний рабочий код с функцией возврата текста заполнителя на место, если ввод оставлен пустым.

<script type="text/javascript">
    $('.inputSpan').each(function() {
        var $input = $(this)

        $(this).children('.inputText').click(function(index) {
            $input.children('.inputText').hide();
            $input.children('.input').focus();
        });
        $(this).children('.input').focusout( function() {
            if ($input.children('.input').attr('value') == '') {
                $input.children('.inputText').show();                   
            }   
        });
    });
</script>

Answer 1

Не проверено, но я думаю, что у вас проблема с областью действия, связанная с $ (this)

$('.inputSpan').each(function() {
        var $input = $(this)

        $(this).children('.inputText').click(function(index) {
            //within this click handler, $(this) refers to the the '.inputText' not '.inputSpan'
            $input.children('.inputText').hide();
            $input.children('.input').focus();
        });
    });

Answer 2

Использование вашего кода ...

$(function() {
    $(".inputSpan").each(function() {
        $(this).children(".inputText").click(function() {
            $(this).hide();
            $(this).siblings(".input").focus();
        });
    });
});

Вот jsFiddle: http://jsfiddle.net/hNXaF/

Более простой способ ...

$(function() { 
    $(".inputText").click(function() { 
        $(this).hide(); 
        $(this).siblings(".input").focus(); 
    });      
}); 

Вот jsFiddle для этой техники: http://jsfiddle.net/R6Vbb/

Answer 3

Вам не нужно использовать jQuery .each().Это не нужно

$('span.inputSpan > span.inputText').click(function() {  
  var $this = $(this);  //for efficiency
  $this.hide();
  $this.siblings('input.input').focus();
});

Кроме того, было бы неплохо использовать тэг с селекторами классов для эффективности.

Просто использование такого имени класса $('.className') вызывает итерациювсего DOM, чтобы найти элемент.Использование tagName перед этим $('span.className') заставляет jQuery использовать document.getElementsByTagName, ограничивая количество проверяемых элементов DOM.

Answer 4

Попробуйте это:

<script type="text/javascript">
$('.inputSpan').each(function() {
var theInput = $(this);    
$(this).children('.inputText').click(function(index) {        
        $(this).children('.inputText').hide();
        $(this).children('.input').focus();
    });
});
</script>

Причина, по которой он не работал, заключается в том, что когда вы использовали '$ (this)' внутри функции click, вы ссылались на inputText вместо inputSpan.

См. Jsfiddle здесь: http://jsfiddle.net/zachzurn/STmmP/

Answer 5

Используйте var $inputSpan = $(this); для обозначения .inputspan

    $('.inputSpan').each(function() {
        var $inputSpan = $(this);
        $(this).children('.inputText').click(function(index) {
            $inputSpan.children('.inputText').hide();
            $inputSpan.children('.input').focus();
        });
    });