jQuery sibling 和 $(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>  

或将整个 block 包装在自己的 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 元素都将处于同一级别，因此彼此是同级元素。