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)当取消聚焦（模糊）元素时检查所述输入的值是否不为空。 （我还没有真正开始验证，所以现在检查字符串长度只是一个临时填充符）。如果元素的字符串小于或等于 0，则将向用户“显示”span.warning。

这一切都运行良好。 我陷入困境的地方如下：

我想添加悬停但不与焦点冲突。我想要的最终效果是这样的：

将鼠标悬停在任何输入或文本区域上，就会显示 div.exp （exp 用于解释）。当您聚焦任何输入或区域时，div.exp 会保留在那里，即使您将鼠标悬停在任何其他输入或文本区域上也是如此。如果您将鼠标悬停在已经聚焦的输入上，则不会发生任何事情。

因此，简而言之，焦点和悬停元素应该“独立”工作。不确定我是否说清楚了，但是哦，好吧，我尝试过=）

干杯 G

Answer 1

通过使用 .hide() 和 .show() 并链接事件，可以显着缩短您的代码。我在此处发布了演示。

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