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代码的要点是当用户聚焦任何一个输入或textarea元素时产生一个隐藏的div（exp），以及在未聚焦（模糊）元素时检查所述输入的值是否为空。（我还没有真正得到验证，所以现在检查字符串长度只是一个临时填充）。如果元素的字符串小于或等于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' );
} );

JQuery结合焦点和悬停事件

2 个答案: