javascript - 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() 并链接事件，可以显着缩短您的代码。我发布了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();
  })
});