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


}); 

기본적으로, 나는 아래와 같은 행이있는 사용자 문의 양식을 가지고 내 jQuery 코드의 요점은

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

숨겨진 사업부를 낳을 수 (exp) 요소를 포커스하지 않을 때 입력 값이 비어 있지 않은지 확인하는 것뿐만 아니라 사용자가 하나의 입력 또는 텍스트 영역 요소를 포커스 할 때. (나는 아직 유효성 검사를하지 않았지만 문자열 길이를 체크하는 것은 임시 필러에 불과하다). 요소의 문자열이 0보다 작거나 같으면 span.warning을 사용자에게 '표시'해야합니다.

이것은 모두 잘 작동합니다. 내가 붙어있는 곳은 다음과 같습니다.

나는 맴돌 았지만 초점이 맞지 않고 추가하고 싶습니다. 원하는 최종 효과는 다음과 같습니다.

입력 또는 텍스트 영역을 가리키면 div.exp가 표시됩니다 (설명은 exp 임). 어떤 입력이나 영역을 집중 시키면 div.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(); 
    }) 
}); 

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