如果按钮单击时为空，则更改输入的边框颜色

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

.val()方法返回一个数组，只有在找不到匹配项时才会返回null。

因此，您应该将if($("[type='text']").val() == null)更改为if($("[type='text']").val() == "")

Updated Fiddle

Answer 2

• 您没有包含jQuery（请参阅How to add jQuery to JSfiddle）
中的内容 在$(this)内的
• click指的是按钮，而不是输入。所以你最好用$("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");
    }
});

如果输入变量为空，null或未定义，则

if(!input.val())为真。