javascript - 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){
     	$(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">