버튼 클릭시 빈 경우 입력의 테두리 색상 변경

Question

요소가 비어 있지 않을 때 jquery를 사용하여 요소의 테두리 색상을 변경하려고합니다. 내가 뭘 찾았는지부터 모든 것이 옳은 것처럼 보이지만, 나는 여전히 그것을 작동시키는 것처럼 보이지 않습니다. 여기

내 JS 바이올린입니다 : https://jsfiddle.net/jessica_mather123/ez3tgnvc/1/

HTML

Text <input type="text"> 
<button>Click Me</button> 

JQuery와

$("button").on("click",function(){ 
    if($("[type='text']").val() == null){ 
     $(this).css("border","2px solid red"); 
    } 
}); 

Answer 1

• 당신은 내부
• $(this) jQuery를 (How to add jQuery to JSfiddle 얼마나 참조)를 포함하지 않았다에은 입력이 아닌 버튼을 나타냅니다. 그래서 당신은 더 나은 그래서 $("input[type='text']")

로 교체 것, 작업 데모는이 https://jsfiddle.net/ez3tgnvc/10/

$("button").on("click",function(){ 
    var input = $("input[type='text']"); 
    if(!input.val()){ 
     input.css("border","2px solid red"); 
    } 
}); 

if(!input.val()) 입력 변수가 비어 null 또는 정의되지 않은 경우 사실 같은 것이다.

Answer 2

.val() 메서드는 배열을 반환하고 null은 일치하는 항목이없는 경우에만 반환됩니다.

그래서 당신은`if($("[type='text']").val() == null)

Updated Fiddle