Question

Heei。我有个问题。我想创建输入值为空，标签删除类，否则（如果输入有值）

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在类UIImage时为红色。但它不起作用。好吗？

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

Answer 1

＆＃13;

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

＆＃13;

label.active {
  color: red;
}

＆＃13;

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

＆＃13;

Answer 2

您只需将条件放在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>

Answer 3

您的代码仅在一次时运行 - 在doc就绪时。

由于您的输入中没有任何值，，它会从两者中删除.active。如果你在开始时给你的输入一个值，它运行正常：

更新了小提琴：https://jsfiddle.net/f7nd0obb/10/

在用户有机会输入某些值后，您可能需要进行此检查，因此请在用户更改值时使用input进行更新，例如：

＆＃13;

function updateActive() {
  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");
  }
}

$(".input-field>input").on("input", updateActive);

// Also on startup
updateActive();

＆＃13;

label.active {
  color: red;
}

＆＃13;

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

＆＃13;

Answer 4

试试这个：

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

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

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

4 个答案: