如果jquery元素爲空，則更改背景顏色

Question

我有2個文本框，1個選擇文件和1個文件。

如何將jquery的背景顏色變爲chage，如果它們是空的。

我想用for循環檢查它們。

<input type="text"> 
<input type="text"> 

<select> 
    <option></option> 
    <option>A</option> 
    <option>B</option> 
    <option>C</option> 
</select> 

<input type="file"> 

Answer 1

我走近它作爲信息進入每個創建命名功能，並呼籲initital頁面加載該功能，然後調用函數再次投入。請注意，我只是將函數從direclty添加到元素 - 添加/刪除類（'無效'）到輸入。切換一個類比直接影響單個元素的CSS總是更好。另請注意，我向其中一個輸入添加了測試值以演示初始狀態。

$(document).ready(function(){ 
 
checkInput(); 
 
    }) 
 

 
$('input, select').on('input change',checkInput) 
 

 
function checkInput(){ 
 
$('input, select').each(function(){ 
 
     if($(this).val() == ''){ 
 
     $(this).addClass('invalid')}else{ 
 
     $(this).removeClass('invalid')} 
 
    }) 
 
}

.invalid{background:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value="test"> 
 
<input type="text"> 
 

 
<select> 
 
    <option></option> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    <option>C</option> 
 
</select> 
 

 
<input type="file">

Answer 2

這應有助於：https://jsfiddle.net/4v8urh7k/1/

// check if the element is empty or not 
function checkEmpty(elem){ 
    if(elem.val() === ''){ 
    elem.addClass('empty'); 
    } else { 
    elem.removeClass('empty'); 
    } 
} 

// listen for when the input/select change 
$('input, select').on('change keyup',function(){ 
    checkEmpty($(this)); 
}); 

// loop through the elements when the page loads 
$('input, select').each(function(){ 
    checkEmpty($(this)); 
});