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

Posted 2023-05-09

【中文标题】Jquery - 如果输入不为空，则添加类

【英文标题】：Jquery - if input not empty, add class

【发布时间】：2018-09-20 23:09:27

【问题描述】：

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

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;

我希望，<div class="input-field"> 内部的label 具有active 的类时将是红色的。但它不起作用。请问有什么办法吗？

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

【问题讨论】：

您好，我刚刚在 jsfiddle 上更新了您的代码，现在它可以按照您的要求工作。希望对你有帮助

【参考方案1】：

$('.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>

【讨论】：

谢谢你的回答！

【参考方案2】：

试试这个：

$('.input-field input').on('keyup', function()

    var self = $( this ),
    label = self.siblings('label');

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

【讨论】：

可能想检查那个逻辑......为什么要检查它是否已经有活动类？

哦！我认为 jQuery 已经通过在添加之前检查类是否存在来开箱即用地做到这一点，但如果不存在，检查类是好的，因为你不想在一个单一的上多次使用“活动”类元素。

不，我的意思是，如果您要运行代码，每次清除输入时都会切换活动类。即在某些情况下它会处于活动状态，而在某些情况下则不会。您还会看到“活动”表示“有值”（即处于活动状态），因此测试将是self.val()!=''。如果你把它改成那个，那么每次你按下一个键时，活动都会切换，检查它是否已经存在 with 检查它是否应该在那里。

是的，你是对的。我明白你所指出的。我看了你的代码，看到了你使用的条件，所以我更新了代码

哇，我喜欢它@JohnZenith。对我来说很简单。谢谢你，真的谢谢你的回答！ :)

【参考方案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>

【参考方案4】：

您的代码仅在 一次 时运行 - 文档准备就绪。

由于您的输入都没有值当时，它会从两者中删除.active。如果你在一开始就给你的输入一个值，它运行良好：

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

---

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

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();

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>

【讨论】：

爱它，当然。感谢您的回答！