Hintergrundfarbe ändern, wenn Elemente leer sind mit jquery

Question

Ich habe 2 Textfelder, 1 Auswahl und 1 Datei.

Wie kann ich ihre Hintergrundfarbe mit jquery ändern, wenn sie leer sind.

Ich möchte alle von ihnen mit einer for-Schleife überprüfen.

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

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

<input type="file"> 

Answer 1

näherte ich mich als eine benannte Funktion erstellen und diese Funktion auf der initital Laden der Seite aufrufen und dann auf die jeweils die Funktion wieder fordern die Eingabe von Informationen in die Eingänge. Beachten Sie, dass ich gerade die Funktion geändert habe, indem ich css direkt zu den Elementen hinzugefügt habe - um eine Klasse ("ungültig") zu den Eingängen hinzuzufügen/zu entfernen. Es ist immer besser, eine Klasse zu wechseln als direkt auf das CSS eines einzelnen Elements zu wirken. Beachten Sie auch, dass ich einen Testwert zu einem der Eingänge hinzugefügt habe, um den Anfangszustand zu demonstrieren.

$(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

Dies sollte helfen: 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)); 
});