JQuery братьев и сестер и $ (это) размытие и фокус - PullRequest
Новая
       20

JQuery братьев и сестер и $ (это) размытие и фокус

3 голосов
/ 14 июля 2010

У меня есть форма с метками и полями ввода. При нажатии на поле я хочу стилизовать поле с помощью CSS и отобразить некоторую информацию о требованиях к вводу в div под меткой.

События focus () и blur () добавляют классы для стилизации поля просто отлично, но попытка показать / скрыть информационные div вызывает методы для ВСЕХ полей, используя $ (this) .siblings () 

$(".input-field").focus(function() { 
    $(this).addClass("input-field-focus");
    $(this).siblings(".label-info").show();
    return false; 
});
$(".input-field").blur(function() { 
    $(this).removeClass("input-field-focus");
    $(this).siblings(".label-info").hide();
    return false; 
});


<label for="login">
    User name:<br />
    <div class="label-info">minimum 6 chararcters: letters, numbers and symbols - _ . @</div>
    <input type="text" name="login" class="input-field" value="<?php echo (isset($_POST['login'])) ? $_POST['login'] : ""; ?>">
</label>

Ответы [ 2 ]

2 голосов
/ 14 июля 2010

Хорошо, теперь я вижу проблему.Ваша HTML-разметка неверна.Вы не можете иметь элемент div внутри label, вместо этого используйте span: 

<label for="login">User name:
    <br />
    <span class="label-info">minimum 6 chararcters: letters, numbers and symbols - _ . @</span>
    <br />
    <input type="text" name="login" class="input-field" value="">
</label>

или заверните весь блок в собственный div: 

<div>
    <label for="login">User name:</label>
    <div class="label-info">minimum 6 chararcters: letters, numbers and symbols - _ . @</siv>
    <input type="text" name="login" class="input-field" value="">
</div>

В противном случае браузер исправит разметку, выдав такую: 

<label for="login">
    User name:<br />
</label> 
<div class="label-info">minimum 6 chararcters: letters, numbers and symbols - _ . @</div>
<input type="text" name="login" class="input-field" value="">

Таким образом, каждый label-info и элемент ввода будут на одном уровне и, следовательно, родственные друг другу.

2 голосов
/ 14 июля 2010

EDIT:

Исходя из вашего обновленного кода, вы должны использовать .prev() вместо .siblings(). 

$(".input-field").focus(function() {
    $(this).addClass("input-field-focus");
    $(this).prev(".label-info").show();
    return false;
});
$(".input-field").blur(function() {
    $(this).removeClass("input-field-focus");
    $(this).prev(".label-info").hide();
    return false;
});

Оригинальный ответ:

Ваш код работает нормально: http://jsfiddle.net/D9qnk/

Я предполагаю, что вы изначально скрываете .label-info, используя visibility: hidden; вместо display:none;

Если это так, переключите ваш css на display:none. 

.label-info {
    display: none;
}​

Или, если вы хотите использовать свойство visibility, измените его значение, используя .css(): 

$(this).siblings(".label-info").css('visibility','visible');

...

$(this).siblings(".label-info").css('visibility','hidden');
...