jquery - 如何在每次输入更改时更改（添加）DIV 类？

Question

我在问是否可以在输入更改/验证时动态地将一个类更改（添加）到一个 DIV。少说例如我有两个类：成功和错误。HTML 标记基本上是这样的：

<div class="control-group">
    <label class="control-label" for="inputFirstName">First Name: <span class="text-error">*</span></label>
    <div class="controls">
        <input type="text" id="inputFirstName" placeholder="John">
    </div>
</div>

因此，当我用一些值填充输入时（无论是否正确，因为我通过 PHP 处理验证），那么我应该success在control-group课后或error输入为空时编写。我如何使用 jQuery 做到这一点？

Answer 1

就像是

$div = $(".control-group");
if($("#inputFirstName").length){
  $div.addClass('success');
}else{
   $div.addClass('error');
}  

将其添加到表单提交或任何其他适当的事件中，如tymeJVfocusout给出的

Answer 2

您可以使用该focusout方法

$("#inputFirstName").focusout(function() {
    var isValid; //Set to either true or false
    isValid ? $(".control-group").addClass("success") : $(".control-group").addClass("error");
});

Answer 3

要为表单中的每个文本字段完成此操作（根据要求）：

$('#formId input[type=text]').blur(function(e) {
    var input = $(e.target);
    if (input.val().length > 0) {
        input.addClass('success');
        input.removeClass('error');
    }
    else {
        input.addClass('error');
        input.removeClass('success');
    }
});

看到这个 jsFiddle。