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

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

HTML

CSS

我希望，当它有一个类

处于活动状态时，
内的
标签将是红色的。但它不起作用。有什么想法吗

我的工作：
您只需将您的条件放入
更改
事件处理程序：


$（'#username'）。在（'change'，function（）上{
if（$（this.val（）=''）{
$（this.next（）.removeClass（“active”）；
}否则{
$（this.next（）.addClass（“active”）；
}
});
label.active{
颜色：红色；
}

电子邮件地址
密码
您只需将您的条件放入
更改
事件处理程序：


$（'#username'）。在（'change'，function（）上{
if（$（this.val（）=''）{
$（this.next（）.removeClass（“active”）；
}否则{
$（this.next（）.addClass（“active”）；
}
});
label.active{
颜色：红色；
}

电子邮件地址
密码
您的代码仅在一次性文档就绪时运行

由于此时两个输入都没有值，因此会从两个输入中删除
.active
。如果您在开始时为您的输入提供一个值，它将正常运行：

更新小提琴：


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


函数updateActive（）{
if（$（“.input字段：输入类型的第一个”）.val（）=''）{
$（“.input字段：类型标签的第一个”）.removeClass（“活动”）；
}否则{
$（“.input字段：类型标签的第一个”）.addClass（“活动”）；
}
}
$（“.input field>input”）。在（“input”，updateActive）上；
//也是在启动时
updateActive（）
label.active{
颜色：红色；
}

电子邮件地址
密码
您的代码仅在一次性文档就绪时运行

由于此时两个输入都没有值，因此会从两个输入中删除
.active
。如果您在开始时为您的输入提供一个值，它将正常运行：

更新小提琴：


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


函数updateActive（）{
if（$（“.input字段：输入类型的第一个”）.val（）=''）{
$（“.input字段：类型标签的第一个”）.removeClass（“活动”）；
}否则{
$（“.input字段：类型标签的第一个”）.addClass（“活动”）；
}
}
$（“.input field>input”）。在（“input”，updateActive）上；
//也是在启动时
updateActive（）
label.active{
颜色：红色；
}

电子邮件地址
密码
试试这个：

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

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

试试这个：

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

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


$（'.input-field-input'）.keyup（函数（）{
if（$（this.val（））{
$（this）.parent（）.find（'label'）.addClass（“active”）；
}否则{
$（this.parent（）.find（'label'）.removeClass（“active”）；
}
});
label.active{
颜色：红色；
}

电子邮件地址
密码

$（'.input-field-input'）.keyup（函数（）{
if（$（this.val（））{
$（this）.parent（）.find（'label'）.addClass（“active”）；
}否则{
$（this.parent（）.find（'label'）.removeClass（“active”）；
}
});
label.active{
颜色：红色；
}

电子邮件地址
密码
您好，我刚刚在JSFIDLE上更新了您的代码，现在它可以按照您的要求工作了。希望它能帮助您您好，我刚刚在JSFIDLE上更新了您的代码，现在它可以按照您的要求工作了。希望它能帮你检查一下逻辑。。。为什么要检查它是否已经有活动类？哦！我认为jQuery已经通过在添加类之前检查类是否存在来实现这一点，但如果不存在，检查类是好的，因为您不希望在单个元素上多次使用“活动”类。不，我的观点是，如果要运行代码，每次清除输入时，它都会切换活动类。也就是说，在某些情况下它会激活，而在某些情况下它不会。您还将看到“active”表示“has a value”（即处于活动状态），因此测试将是
self.val（）！=”。如果您将其更改为该值，则每次按下某个键时，active都会切换，因为检查它是否已经存在，并检查它是否应该存在。是的，您是对的。我理解你指出的。我看了你的代码，看到了你使用的条件，所以我更新了代码哦，我喜欢它@JohnZenith。这对我来说很简单。谢谢你，真的谢谢你的回答！：）可能想检查一下逻辑。。。为什么要检查它是否已经有活动类？哦！我认为jQuery已经通过在添加类之前检查类是否存在来实现这一点，但如果不存在，检查类是好的，因为您不希望在单个元素上多次使用“活动”类。不，我的观点是，如果要运行代码，每次清除输入时，它都会切换活动类。也就是说，在某些情况下它会激活，而在某些情况下它不会。您还将看到“active”表示“has a value”（即处于活动状态），因此测试将是
self.val（）！=”。如果您将其更改为该值，则每次按下某个键时，active都会切换，因为检查它是否已经存在，并检查它是否应该存在。是的，您是对的。我理解你指出的。我看了你的代码，看到了你使用的条件，所以我更新了代码哦，我喜欢它@JohnZenith。这对我来说很简单。谢谢你，真的谢谢你的回答！：）谢谢，谢谢你的回答！谢谢，谢谢你的回答！我当然喜欢。谢谢你的回答！我当然喜欢。谢谢你的回答！
label.active {
  color: red;
}

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

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