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

【问题标题】：Change border color of input if empty on button click如果单击按钮时为空，则更改输入的边框颜色
【发布时间】：2016-07-05 14:36:05
【问题描述】：

当元素不为空时，我正在尝试使用 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");
    } 
});

【问题讨论】：

使用if($("[type='text']").val() == ""){}。
你没有在你的小提琴中包含 JQuery，加上 $(this) 在这个上下文中意味着你点击的按钮，而不是文本字段。
对不起，我在里面工作，所以它可能已经改变了。
Mohit，解决了我的问题。谢谢！

标签： jquery css if-statement

【解决方案1】：

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

所以你应该把if($("[type='text']").val() == null)改成if($("[type='text']").val() == "")

Updated Fiddle

【讨论】：

【解决方案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()) 为真。

【讨论】：

“看演示” 不是正确的答案。将代码放入答案本身并使用演示来支持答案。问题和答案应该是自包含的
这非常有用！谢谢！
由于这是一个关于相对简单的条件的问题，我建议您解释一下!input.val()，以帮助向新读者解释。
就是说 input.val() = false or null 对吧？
我更新了我的答案，考虑到你所有的 cmets，如果还有什么不清楚的，请告诉我。