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

修改

根据您更新的代码，您应该使用.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: 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');

Answer 2

好的，现在我看到了问题。你的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和输入元素将处于同一级别，因此彼此之间会有兄弟姐妹。

jQuery兄弟和$（这）模糊和焦点

2 个答案: