jQuery frères et sœurs et $ (this) flou et focus

Question

J'ai un formulaire avec des étiquettes et des champs de saisie. Lorsque je clique sur un champ, je veux styliser le champ avec CSS et afficher des informations sur les exigences d'entrée dans un div sous l'étiquette.

La mise au point() et flou() événements ajoutent les classes pour le style le terrain très bien, mais en essayant de montrer/cacher les divs d'information déclenche les méthodes sur tous les champs en utilisant $ (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

Ok, maintenant je vois le problème. Votre balise HTML est incorrecte. Vous ne pouvez pas avoir un élément div intérieur label, utilisez span à la place:

<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> 

ou envelopper tout le bloc dans un propre 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> 

---

Sinon, le navigateur corrigera le balisage produisant ceci:

<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=""> 

Donc, tous les label-info et l'élément d'entrée seront au même niveau et donc les frères et sœurs les uns aux autres.

Answer 2

EDIT:

en fonction de votre code mis à jour, vous devez utiliser .prev() au lieu de .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/

---

réponse originale:

Votre code fonctionne très bien: http://jsfiddle.net/D9qnk/

Je suppose que votre cachent d'abord le .label-info à l'aide visibility: hidden; au lieu de display:none;

Si tel est le cas, passez votre css à utiliser display:none à la place.

.label-info { 
    display: none; 
}​ 

Ou si vous voulez utiliser la propriété visibility, puis modifiez sa valeur à l'aide .css():

$(this).siblings(".label-info").css('visibility','visible'); 

... 

$(this).siblings(".label-info").css('visibility','hidden');