entrées de piste et classe bascule avec jQuery

Question

Ce que je suis en train de réaliser est la voie 20 entrées, si l'on est rempli, je veux ajouter une classe à un div parent de cette entrée, si elle devient vide après que je veux la classe à supprimer lui-même du parent. Ce code fait ce que je veux quand je l'exécute dans la console, comment puis-je l'améliorer afin qu'il puisse suivre les entrées et basculer la classe?

$('.input').each(function() { 
    var $input = $(this); 
    if ($input.val()) { 
     var $parent = $input.closest('.card'); 
     $parent.addClass('colored') 
    } 
}); 

Answer 1

Merci à tous pour les réponses, voici ce qui a fonctionné pour moi après avoir essayé toutes les solutions. J'espère que ça aide quelqu'un d'autre.

function checkInputs() { 
    $('.input').each(function(){ 
     if($(this).val() === ""){ 
      $(this).parent().parent('.unit-card').removeClass('filled'); 
     } else { 
      $(this).parent().parent('.unit-card').addClass('filled'); 
     } 
    }); 
} 

Answer 2

Vous pouvez utiliser un événement pour cela. Pour les entrées, jQuery a l'événement input qui se déclenche chaque fois que la valeur d'une entrée change.

$(".input").on("input", function() { 
    if ($(this).val().length === 0) 
     $(this).closest('.card').removeClass("colored"); 
    else 
     $(this).closest('.card').addClass("colored"); 
}); 

Answer 3

Votre code vérifie les valeurs lors de l'exécution initiale. Vous devez joindre les événements copy, paste, change, keypress, keydown, keyup et input. Voir par exemple:

$('input').on('copy paste keydown keyup keypress change input', function(){ 
 

 
    var $input = $(this); 
 

 
    if($input.val() == ''){ 
 
    $input.parent('.form-group').addClass('empty'); 
 
    } else { 
 
    $input.parent('.form-group').removeClass('empty'); 
 
    } 
 

 
});

.form-group { 
 
    margin-bottom:10px; 
 
} 
 
.form-group.empty > input { 
 
    border:2px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <input name="name" type="text" placeholder="name"/> 
 
</div> 
 
<div class="form-group"> 
 
    <input name="email" type="text" placeholder="email"/> 
 
</div> 
 
<div class="form-group"> 
 
    <input name="address" type="text" placeholder="address"/> 
 
</div>

Answer 4

$("input[type='text']").on("keyup",function(){ 
 

 
if($(this).val()!="") 
 
{ 
 
$(this).parent().addClass("active"); 
 
}else{ 
 
$(this).parent().removeClass("active"); 
 
} 
 

 
})

.active{ 
 
background-color:red; 
 
}

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

Answer 5

C'est l'extrait Here. Une fonction keyup() et une vérification si tous les ont fait.