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

さて、問題がわかりました。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>

または、ブロック全体を own でラップします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 に答える
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-infousing を隠していると思います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');
于 2010-07-14T14:19:20.770 に答える