Javascript 如果输入为空，则添加类；如果输入为空，则删除类

如果输入为空，我想添加一个类，如果输入为空，则将其删除。我最初有

addClass（）因此我尝试使用：

.removeClass().addClass();

但它似乎不会在单击按钮时更新类

HTML:

您正在尝试。有一种方法

从链接单据中引用：

.toggleClass（）的第二个版本将第二个参数用于
确定是否应添加或删除类。如果这
参数的值为true，则添加该类；如果为假，则为
类被删除。实质上，该声明：

$( "#foo" ).toggleClass( className, addOrRemove );

相当于：

if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}

类似于firstName.toggleClass（“errorInput”，firstName.val（）==”）

的内容应该适合您的情况。

您忘了在if中添加一个else

 if(){
    // add the class
 } else {
    // remove the class
 }

---

这里有一个更新的提琴：

您的代码没有考虑一个输入为空而另一个为空的情况

编辑：通用输入长度检查器。

---

您可以将某些类设置为输入字段，或按如下方式选择em：

var firstName = $("#firstName");
var lastName = $("#lastName");

$('#button').click(function () {

  $('input').each(function(){

    if($this.val().trim()){
      $(this).addClass("errorInput");
    }
    else{
      $(this).removeClass("errorInput");
    }

  });

});

---

你删除了一个类，然后又重新添加了它。哎呀，当标题没有反映内容时，我很不舒服。标题中没有任何关于“点击”的内容（

firstName.toggleClass（“errorInput”，firstName.val（）=”）

toggle只需在按钮单击时切换类，而不管输入是否为空，或者toggle可以接受一个条件参数，指示是否打开或关闭类。@Hamms将其放入answer@Hamms哇…不知道toggle类接受了另一个参数。谢谢！！我宁愿避免那么多if块。我有很多放置字段，这就是为什么我的if语句在一条直线上有多个检查，避免代码重复是好的，但是错误状态是不好的。请检查我的编辑以获得通用解决方案。@user4756836-这样，即使不只是为了避免额外的if/else，您的名字字段也会显示为处于错误状态？幸运的是有是一种较短的编码方式，没有if/else，但即使没有，也应该编写所需的代码，以避免混淆用户。

 if(){
    // add the class
 } else {
    // remove the class
 }

if(firstName.val() == "")
    firstName.addClass("errorInput");
else
    firstName.removeClass("errorInput")

if(lastName.val() == "")
    lastName.addClass("errorInput");
else
    lastName.removeClass("errorInput")

$('#button').click(function () {
    $('input').each(function(){
        var val = $(this).val();
        $(this).toggleClass("errorInput",val.length==0)
    })
});

var firstName = $("#firstName");
var lastName = $("#lastName");

$('#button').click(function () {

  $('input').each(function(){

    if($this.val().trim()){
      $(this).addClass("errorInput");
    }
    else{
      $(this).removeClass("errorInput");
    }

  });

});