jquery sélectionnez une classe parmi plusieurs

Question

J'essaie d'obtenir les fonctionnalités suivantes. Dans un formulaire j'ai plusieurs champs avec le nom de classe .inputField si l'un de ces champs est sélectionné, alors la div associée à cet élément devrait être montrée sur le focus et cachée sur le flou. Cependant, lorsque j'implémente le code ci-dessous en sélectionnant le second élément, la classe est appliquée aux deux. Je ne sais pas où je vais mal?!?!?

balisage HTML:

<form class="friendlyForm" name="friendlyForm" id="friendlyForm"> 
              <ul> 
               <li> 
                <label for="testField">Test field</label> 
                <input name="testField" value="here" class="inputField" id="testField" /> 
                <div class="helper" style="display: none;">helper text here</div> 
               </li> 
               <li> 
                <label for="testField">Test field2</label> 
                <input name="testField2" value="here" class="inputField" id="testField2" /> 
                <div class="helper" style="display: none;">helper text here</div> 
               </li> 
              </ul> 
             </form> 

balisage jQuery:

$('.friendlyForm').find('.inputField').each(function(i) { 
    $(this).blur(); 
    $(this).focus(function() { 
     //Add the focus class and fadeIn the helper div 
     $(this).parent().addClass('focus'); 
     $(this).parent().parent().find('.helper').fadeIn(); 
    }); 
    $(this).blur(function() { 
     //Remove the focus class and fadeOut helper div 
     $(this).parent().removeClass('focus'); 
     $(this).parent().parent().find('.helper').fadeOut(); 
    }); 
}); 

Les pointeurs ici seraient grandement appréciés.

Merci

Answer 1

Si je comprends bien votre question, cela devrait faire l'affaire.

$('.friendlyForm .inputField').each(function() { 
    $(this).blur().focus(function() { 
    $(this).parent().addClass('focus'); 
    $(this).siblings('.helper').fadeIn(); 
    }).blur(function() { 
    $(this).parent().removeClass('focus'); 
    $(this).siblings('.helper').fadeOut(); 
    }); 
}); 

Qu'est-ce que vous faites mal est que vous utilisez parent().parent() qui va obtenir le tag <ul> et ainsi trouverez tous les éléments .helper dans ce <ul>.