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