JQuery结合焦点和悬停事件

Question

将HOVER和FOCUS事件与jquery结合起来有点麻烦。这是我原本：

$("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'); 
    } 


}); 

基本上，我有一个用户的接触形式类似下面的行：

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

我的jQuery代码的一点是要生出一个隐藏的div（ exp），当用户关注任何一个输入或textarea元素时，以及在未聚焦（模糊）元素时检查所述输入的值是否为空。 （我还没有真正下到验证，所以现在检查字符串长度只是一个临时填充）。如果元素的字符串小于或等于0，则span.warning将被显示给用户。

这一切都很好。 我卡住如下：

我想在盘旋，但没有重点冲突的增加。我期望的最终效果是这样的：

你悬停任何输入或文本域，你会得到div.exp露面（EXP是为了说明）。您关注任何输入或区域，并且div.exp停留在那里，即使您将鼠标悬停在任何其他输入或textareas上。如果你悬停一个已经集中的输入，什么都不应该发生。

所以，简而言之，焦点和悬停元素应该独立工作。不知道我说清楚了，但很好哦，我试过=）

干杯 摹

Answer 1

您的代码可以通过使用.hide()和.show()和链接的事件显著缩短。我发布了一个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

您可以在它的重点是避免与您的悬停事件冲突标志设置为输入或文本域。如果在触发over或out事件时该标志设置为true，则其代码不会被执行。下面的代码显示了这个想法（我没有测试它）。

$("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'); 
});