2014-03-27 2 views
0

이 질문은 설명 된 많은 방법을 사용한 후에 사용하기 전에는 질문이 있습니다.html 입력 값 변경 배경에 값이 같지 않음

입력란에 포커스가있을 때 div의 배경을 변경하려고합니다. 즉,! = 0 인 텍스트가있는 경우에도 작동하도록 포커스를받을 수는 있지만 흐림 효과가 제대로 작동하지 않습니다.

jQuery를 :

$('.pI_nameText1').focus(function() { 
    $(".nameLights").addClass("lightOverlay"); 
}); 
$('.pI_nameText1').blur(function() { 
    $(".nameLights").removeClass('lightOverlay'); 
    if ($(".pI_nameText1").val == '') { 
     $('.nameLights').removeClass("lightOverlay"); 
    } 
}); 

HTML : 여기

<input id="comments" placeholder="Type many lines of texts in here and you will see magic stuff" class="pI_nameText1"></input> 
<div class="nameLights"></div> 

이 바이올린입니다 : http://jsfiddle.net/3fnzL/

나는 문제가 나는 경우 문을 작성한 방법과 관련이있을 수 있다고 생각 .. .

+0

항상 같은 수업을 삭제하고 있습니다. – adeneo

+0

This is it -> http://jsfiddle.net/adeneo/3fnzL/1/ – adeneo

+0

사용자가 텍스트를 입력하면 클래스를 그대로 유지 하시겠습니까? – slynagh

답변

2

나는 이것이 proper answer이라고 생각한다. . 당신은 .val() 대신 .val를 사용되어야하고, 나는 또한 더 논리적 만들기 위해 if 문의 순서 주위에 변경 :

$('.pI_nameText1').blur(function() { 
    if ($(".pI_nameText1").val() == '') { 
     $(".nameLights").removeClass('lightOverlay') 
    } 
}); 

를 앞으로, 당신은 디버깅을 위해 console.log();를 사용해야합니다. console.log($(".pI_nameText1").val)을 사용하면 문제가 무엇인지 명확히 알 수있는 문자열이 아닌 개체가 반환됩니다. 대부분의 브라우저에서 F12 키를 사용하여 콘솔에 액세스하거나 마우스 오른쪽 단추로 클릭하고 inspect 요소를 선택한 다음 개발자 창의 콘솔 탭을 찾습니다.

+0

James가 감사합니다. 구문과 관련이 있다는 것을 알았습니다 ... 전에는 콘솔을 사용했지만 실제로는 알지 못했습니다. ... 가지고있을 때 단순히 ""돌아 오는 이유는 무엇입니까? – sventizzle

+0

@sventizzle'console.log()'는 콘솔에있는 모든 것을 반환합니다. 현재 바이올린에서는 값이 비어있는 경우에만 텍스트 상자의 값을 반환합니다. 'if' 문 밖으로 이동하면'.blur'의 텍스트 상자에있는 내용이 모두 인쇄됩니다. 이 방법으로 콘솔을 통해 모든 변수, 문자열 또는 숫자를 리턴 할 수 있습니다. –