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

您可以将某些类设置为输入字段，或者像这样选择em：

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

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

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

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

  });

});

Answer 2

你正试图toggle the class。有一种方法！

从链接的文档引用：

.toggleClass（）的第二个版本使用第二个参数确定是否应添加或删除该类。如果这参数的值为true，然后添加类;如果是假的话类被删除。本质上，声明：
$( "#foo" ).toggleClass( className, addOrRemove );
相当于：
if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}

firstName.toggleClass("errorInput", firstName.val() === "")的某些内容应该适合您的情况。

Answer 3

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

https://jsfiddle.net/0tfenwto/2/

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

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

编辑：通用输入长度检查器。 https://jsfiddle.net/0tfenwto/3/

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

Answer 4

您忘了在if上添加其他内容。

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

这是一个更新的小提琴：https://jsfiddle.net/za7pkb74/1/

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

4 个答案: