Изменения цвета ввода jQuery Не работает правильно

Question

Я пытаюсь получить свои поля ввода (связанные классом), чтобы изменить цвет, когда у них есть контент.

Это работает, но удаление класса не активируется должным образом, и я не уверен, почему. Если я ввожу содержимое в первый, затем второй ввод, удаляю содержимое с первого, класс удаляется, однако, если я удалю контент со второго до первого, фон останется синим.

Я не могу использовать текстовые поля Id, поскольку они уже используются.

JS код:

$('.checkFiller').on('change', function() { 
    if ($('.checkFiller').length > 0) { 
     $(this).addClass('allFiller'); 
    } 
    if ($('.checkFiller').val() == '' || $('.checkFiller').val() == 0 || $('.checkFiller').val() == null) { 
     $(this).removeClass('allFiller'); 
    } 
}); 

Вот является jsfiddle демо мое разочарование - что я делаю не так?

https://jsfiddle.net/qwgj77tm/1/

Answer 1

Вы должны использовать this, чтобы получить тот, который вы редактировали использование .hasClass() и .length достигнуть этого

$('.checkFiller').on('change', function() { 
 
    if($(this).val().length==0){ 
 
     \t $(this).removeClass('allFiller'); 
 
    }else $(this).addClass('allFiller'); 
 
});

.allFiller { 
 
    background-color: #333366; 
 
    color: #ffffff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="checkFiller"> 
 
<input class="checkFiller"> 
 
<input class="checkFiller">

Answer 2

Вы должны изменить свои ссылки с $('.checkFiller') на $(this) в на:

$('.checkFiller').on('change', function() { 
    if ($(this).length > 0) { 
     $(this).addClass('allFiller'); 
    } 
    if ($(this).val() == '' || $(this).val() == 0 || $(this).val() == null) { 
     $(this).removeClass('allFiller'); 
    } 
}); 

Как есть, вы проверяете первый вход с классом, а тот, который изменился.