javascript - 如果输入字段已填充，则删除父类

Question

我有一个问题。如何检查输入字段是否填充了文本并删除其上的 div 类？

我已经试过了，但是没用....

 $('.form-control-login input').blur(function(){
    if( !$(this).val() ) 
          $(this).parent().removeClass('is-empty');
    
});

.is-empty {
  color:red;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group label-floating is-empty">
 <label class="control-label">Your Email</label>
 <input class="form-control-login" name="login" autocomplete="username">
 </div>

https://jsfiddle.net/Gamernamer/wwd8x63p/2/

非常感谢您的帮助!

Answer 1

首先，您的选择器不正确。 .form-control-login 元素是 input，因此您不需要它。

要解决此问题，请使用 input 事件而不是 blur，这样类将根据用户类型进行更新。然后，您可以使用 toggleClass() 在父元素上设置类，如下所示:

$('.form-control-login').on('input', function() {
  $(this).parent().toggleClass('is-empty', this.value.trim().length == 0);
});

.is-empty {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group label-floating is-empty">
  <label class="control-label">Your Email</label>
  <input class="form-control-login" name="login" autocomplete="username">
</div>