如果输入为空则添加类，如果不为空则删除它

Question

如果输入为空，我想添加一个类，如果不是，则删除它。我最初有addClass();所以我尝试使用：

.removeClass().addClass();

但它似乎并没有在单击按钮时更新类。

HTML：

<input id="firstName" type="text" />
<input id="lastName" type="text" />
<a href="#" id="button">SEND</a>

jQuery：

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

$('#button').click(function () {
    if(firstName.val() == "" || lastName.val() == ""){
        firstName.removeClass("errorInput").addClass("errorInput");
        lastName.removeClass("errorInput").addClass("errorInput");
    }

if ($(":input").hasClass("errorInput")) {
        alert("false");
    } else {
        alert("true");
    }
});

JSFiddle

Answer 1

您正在尝试切换班级。有一个方法可以做到这一点！

引用链接文档：

.toggleClass() 的第二个版本使用第二个参数来确定是否应添加或删除该类。如果此参数的值为 true，则添加该类；如果为 false，则删除该类。本质上，该声明：

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

相当于：

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

类似的东西firstName.toggleClass("errorInput", firstName.val() === "")应该适合你的情况。