3

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

2 回答 2

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: //jsfiddle.net/D9qnk/

我的猜测是，您最初隐藏的是.label-infousingvisibility: 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');
于 2010-07-14T14:19:20.770 回答
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元素和输入元素都将处于同一级别，因此彼此是兄弟。

于 2010-07-14T14:32:00.913 回答