JQuery combinant Focus et Hover Events

Question

J'ai un peu de mal à combiner les événements HOVER et FOCUS avec jquery. Voilà ce que j'avais à l'origine:

$("input,textarea").focus(function() { 

    $(this).parent().siblings('div.exp').removeClass('hide'); 
    $(this).parent().siblings('div.exp').addClass('show'); 

}); 


$("input,textarea").blur(function(){ 

    $(this).parent().siblings('div.exp').removeClass('show'); 
    $(this).parent().siblings('div.exp').addClass('hide'); 
    if ($(this).val().length <= 0) { 
     $(this).siblings('span.warning').removeClass('hide'); 
     $(this).siblings('span.warning').addClass('show');} 

    else { 

     $(this).siblings('span.warning').removeClass('show'); 
     $(this).siblings('span.warning').addClass('hide'); 
    } 


}); 

Fondamentalement, j'ai un formulaire de contact de l'utilisateur avec des lignes comme celui ci-dessous:

<div class="row"> 
    <p><label>Your Name</label><input type="text" name="name" id="name" value=""/><span class="warning">Your name is missing</span></p> 
    <div class="exp">Who am I to address?</div> 
</div> 

Le point de mon code Jquery est de produire un div caché (exp) lorsque l'utilisateur effectue la mise au point d'un élément d'entrée ou de zone de texte et vérifie si la valeur de cette entrée n'est pas vide lors du flou (flou) de l'élément. (Je ne suis pas encore vraiment arrivé à la validation, alors vérifier la longueur de la chaîne en ce moment n'est qu'un remplissage temporaire). Si l'élément a une chaîne plus petite ou égale à 0, span.warning doit être 'montré' à l'utilisateur.

Tout cela fonctionne bien. Où je suis coincé est le suivant:

Je veux ajouter en vol stationnaire, mais sans conflit avec le focus. Mon effet final désiré est le suivant:

Vous passez votre souris sur n'importe quelle entrée ou zone de texte et vous obtenez le div.exp (exp pour explication). Vous vous concentrez sur n'importe quelle entrée ou zone et le div.exp reste là, même si vous allez survoler d'autres entrées ou zones de texte. Si vous planez une entrée déjà ciblée, rien ne devrait arriver. Donc, en un mot, les éléments de mise au point et de survol doivent fonctionner «indépendamment» pour ainsi dire. Je ne sais pas si je me suis fait clair, mais oh bien, j'ai essayé =)

Vive G

Answer 1

Votre code peut être considérablement réduit en utilisant des .hide() et .show() et enchaînant les événements. J'ai posté un demo here.

$(document).ready(function(e){ 
// hide all explanations and warnings 
$('.exp, .warning').hide(); 
// add focus, blur and hover events to all inputs & textareas 
$('input,textarea') 
    // if focused, show the explanation 
    .focus(function(){ 
    // show explanation on focus (and add a class so the hover function knows not to hide it 
    $(this).addClass('focused').closest('.row') 
    .find('.exp').show() 
    .find('.warning').hide(); 
    }) 
    .blur(function(){ 
    // hide explanation on blur 
    $(this).removeClass('focused').closest('.row').find('.exp').hide(); 
    if ($(this).val().length < 1) { 
    // input is empty, show the warning 
    $(this).closest('.row').find('.warning').show(); 
    } else { 
    // input is not empty, hide the warning... you might want to add the validation here 
    $(this).closest('.row').find('.warning').hide(); 
    } 
    }) 
    .hover(function(){ 
    // show explanation when hovered 
    $(this).closest('.row').find('.exp').show(); 
    },function(){ 
    // hide explanation if the input is not focused 
    if ($(this).is(':not(.focused)')) $(this).closest('.row').find('.exp').hide(); 
    }) 
}); 

Answer 2

Vous pouvez définir un drapeau à l'entrée ou textarea alors qu'il est concentré pour éviter tout conflit avec votre événement de vol stationnaire. Si l'indicateur est défini sur true lorsque l'événement over ou out est déclenché, son code n'est pas exécuté. Le code suivant montre l'idée (je ne l'ai pas testé).

$("input,textarea").focus(function() 
{ 
    $(this).parent().siblings('div.exp').removeClass('hide').addClass('show'); 
    $(this).data("hasFocus", true); 
}); 

$("input,textarea").blur(function() 
{ 
    $(this).parent().siblings('div.exp').removeClass('show').addClass('hide'); 

    if($(this).val().length <= 0) 
     $(this).siblings('span.warning').removeClass('hide').addClass('show'); 
    else 
     $(this).siblings('span.warning').removeClass('show').addClass('hide'); 

    $(this).data("hasFocus", false); 
}); 

$("input,textarea").hover(function() 
{ 
    // Over event 
    if(typeof $(this).data("hasFocus") != undefined && !$(this).data("hasFocus")) 
     $(this).parent().siblings('div.exp').removeClass('hide').addClass('show'); 
}, 
function() 
{ 
    // Out event 
    if(typeof $(this).data("hasFocus") != undefined && !$(this).data("hasFocus")) 
     $(this).parent().siblings('div.exp').removeClass('show').addClass('hide'); 
});