如果在按鈕單擊時爲空，則更改輸入的邊框顏色

我嘗試使用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"); 
    } 
});

來源

2016-07-05 Jessica Mather

使用'如果（$（「[類型= '文本']」）。VAL（）== 「」）{}'。 –

你沒有在你的小提琴中加入JQuery，加上這個上下文中的'$（this）'意味着你點擊的按鈕，而不是文本字段。 – DBS

對不起，關於這一點，我在工作，所以它可能已經改變。 –

您不包括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"); 
    } 
});

if(!input.val())爲真，如果輸入變量爲空，空或未定義。

來源

2016-07-05 14:44:06

*「看演示」*不是一個正確的答案。把代碼放在答案本身，並使用演示來支持答案。問題和答案應自成一體 – charlietfl

這非常有用！謝謝！ –

由於這是一個關於相對簡單條件的問題，我建議你解釋'！input.val（）'，以幫助向更新的讀者解釋它。 – DBS

.val()方法返回一個數組，null只有當沒有找到匹配時纔會返回。

所以，你應該改變if($("[type='text']").val() == null)到if($("[type='text']").val() == "")

Updated Fiddle

來源

2016-07-05 14:50:28 Pugazh

如果在按鈕單擊時爲空，則更改輸入的邊框顏色

回答

相關問題