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()在单行中设置父元素上的类，如下所示：

＆＃13;

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

＆＃13;

.is-empty {
  color: red;
}

＆＃13;

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

＆＃13;

Answer 2

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

   });
 })

您应该检查（$（this）.val（））是否为空，然后删除该类，而不是相反。

Answer 3

我希望这能达到你的要求

提供$（＆＃39; .form-control-login＆＃39;）而不是$（＆＃39; .form-control-login input
使用if（$（this）.val（））而不是if（！$（this）.val（））

＆＃13;

$('.form-control-login').blur(function(){
    console.log("dd");
    if( $(this).val() ) 
          $(this).parent().removeClass('is-empty');
    
});

＆＃13;

.is-empty {
  color:red;   
}

＆＃13;

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

＆＃13;

Answer 4

＆＃13;

$('.form-control-login').blur(function()
{

    if( $(this).val() != '' ) {

          $(this).parents('.form-group').removeClass('is-empty');
    }
else {
$(this).parents('.form-group').addClass('is-empty');
}
});

＆＃13;

.is-empty {
  color:red;   
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

＆＃13;

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

＆＃13;

.is-empty {
  color:red;   
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

＆＃13;

如果输入字段已填满，则删除父类

4 个答案: