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

问题描述：

如果输入为空，我想添加一个类，如果输入为空，则将其删除.我最初有addClass();，所以尝试使用:

I would like to add a class if input is empty and remove it if it isn't. I initially had addClass(); so I tried using:

.removeClass().addClass();

但是，单击按钮似乎并没有更新课程.

But it doesn't seem to update the class on the click of the button.

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

答

您正尝试切换类.有一种方法！

You're trying to toggle the class. There's a method for that!

从链接文档中引用:

.toggleClass()的第二个版本将第二个参数用于确定是应该添加还是删除类.如果这参数的值为true，则添加类；如果为假，则类已删除.本质上，该语句:

The second version of .toggleClass() uses the second parameter for determining whether the class should be added or removed. If this parameter's value is true, then the class is added; if false, the class is removed. In essence, the statement:

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

等效于:

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

符合firstName.toggleClass("errorInput", firstName.val() === "")的情况应该适用于您的情况.

Something along the lines of firstName.toggleClass("errorInput", firstName.val() === "") should work for your case.

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

相关推荐