Jquery -如果输入不为空，则添加类

Question

平先生。我有个问题。我想要创建如果输入的值为空，标签删除类，否则(如果输入有一个值)

HTML

  <div class="input-field">
            <input type="email" id="username" name="email" required>
            <label for="username">Email Address</label>
        </div>
        <div class="input-field">
            <input type="password" id="password" name="password" required>
            <label for="password">Password</label>
        </div>

Jquery

$(document).ready(function(){
      if ($(".input-field:first-of-type input").val() == '') {
        $(".input-field:first-of-type label").removeClass("active");
      }
      else {
        $(".input-field:first-of-type label").addClass("active");
      }
});

CSS

label.active {
  color: red;
}

我希望，label内部的<div class="input-field">第一类型将是红色的，当它有一个类active.但不起作用。有什么想法吗？

我的作品：https://jsfiddle.net/f7nd0obb/8/

Answer 1

试试这个：

$('.input-field input').on('keyup', function()
{
    var self = $( this ),
    label = self.siblings('label');

    if ( self.val() != '' ) {
        label.addClass('active');
    } else {
        label.removeClass('active');
    }
});

Answer 2

​

$('.input-field input').keyup(function(){
  
  if($(this).val()){
    $(this).parent().find('label').addClass("active");
  }else{
    $(this).parent().find('label').removeClass("active");
  }
});

label.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field">
  <input type="email" id="username" name="email" required>
  <label  for="username">Email Address</label>
</div>
<div class="input-field">
  <input type="password" id="password" name="password" required>
  <label for="password">Password</label>
</div>

​

Answer 3

只需将条件放在change事件处理程序中：

​

$('#username').on('change',function(){
  if($(this).val() == ''){
    $(this).next().removeClass("active");
  }else{
    $(this).next().addClass("active");
  }
});

label.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field">
  <input type="email" id="username" name="email" required>
  <label for="username">Email Address</label>
</div>
<div class="input-field">
  <input type="password" id="password" name="password" required>
  <label for="password">Password</label>
</div>

​