jQuery 兄弟姐妹和 $(this) 模糊和焦点

Question

我有一个带有标签和输入字段的表单。当单击某个字段时，我想使用 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>    

Answer 1

好的，现在我看到问题了。您的 HTML 标记是错误的。 label 中不能有 div 元素，请使用 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 和 input 元素都将处于同一级别，因此彼此是同级元素。

Answer 2

编辑：

根据您更新的代码，您应该使用 .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://api.jquery.com/prev/
• http://api.jquery.com/siblings/

---

原始答案：

您的代码工作正常：http://jsfiddle.net/D9qnk/

我的猜测是您最初隐藏了 .label-info 使用 visibility: hide; 而不是 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');