jquery on input blur 표시/숨기기 클래스

Question

현재 html 양식을 작성하고 jquery를 사용하여 유효성을 검사하고 있습니다.

는 각 입력 필드는 다음과 같이 설정 :

<div class="controls"> 
    <input type="text" class="input-xlarge" name="name" id="name"> 
    <div class="info">&nbsp;</div> 
    <div class="valid" style="display:none;">&nbsp;</div> 
</div> 

것은 여기에 지금까지 내 JQuery와 있습니다 :

$('.controls input').blur(function() {     
    if(!$(this).val()) {      
     $(this).css('border-color','red'); 
     $(this).find('.info').css('display','none'); 
     $(this).find('.error').css('display','inline-block'); 

사용자가 양식의 정보 DIV 쇼를 볼 때 생각입니다. 정보를 입력하지 않고 양식을 탭하여 양식을 진행하면 오류 클래스가 정보 클래스를 표시하고 제거합니다.

어디에서 잘못 되었나요?

$('.controls input').blur(function() { 
    if (!$(this).val()) { 
     $(this).css('border-color', 'red'); 
     $(this).siblings('.info').css('display', 'none'); 
     $(this).siblings('.error').css('display', 'inline-block'); 
    } 
}); 

Answer 1

이 시도

, 당신은 여기 siblings 방법을 사용해야합니다.

코드 $ (this)의 콜백 블록에서 입력 태그를 참조했습니다.

이 시도 :

 $(this).css('border-color','red'); 

    $(this).parents('.controls').find('.info').css('display','none'); 
    $(this).parents('.controls').find('.error').css('display','inline-block'); 

Answer 2

당신의 선택이 아니라 입력 필드를 가져옵니다 건배, 댄