php - removeClass ("has-error")当字段更改时 Bootstrap、javascript

Question

我的Javascript

$('.input-group').each(function() {
$mainElement = $(this);
$sibling = $mainElement.next('.form-control');
$sibling.change(function($mainElement) {
    return function() {
        $mainElement.removeClass('has-error');        
    }
}($mainElement)); });

我的表单

<div class="form-group">
    <label>Organization</label>
    <div class="input-group has-error">
        <input type="text" class="form-control" name="organization" />
        <!--added code-->
        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    </div>
</div>
<div class="form-group">
    <label>Address</label>
    <div class="input-group has-error">
        <input type="text" class="form-control" name="address" />
        <!--added code-->
        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    </div>
</div>

这个想法来自here在我尝试 .each() 解决方案之一 here 后

我使用 twitter bootstrap 来在 PHP 后端验证之后显示 .has-error 类，这是我更喜欢的。现在我想删除 .each() .has-error 类，以删除那些 下的 .form-control 中发生的任何更改.input-group.

请注意...我不想在这里使用 jQuery 验证。

有人在这里提供了最佳答案，链接如下:

https://www.jsnippet.net/snippet/324/remove-class-haserror-when-field-was-changed

我这样修改了它:

$('.input-group').each(function(){
    $(this).find('.form-control').change(function(){
        $(this).closest('div').removeClass('has-error');            
    });
});

现在，当我修改代码时，我添加了:

$('.input-group').each(function(){
    $(this).find('.form-control').change(function(){
        $(this).closest('div').removeClass('has-error').closest('span').removeClass('glyphicon-remove');            
    });
});

在同样的事情中，一旦 .form-control 字段发生更改，我想删除 glyphicon-remove 类，就像 has-error 类一样。

我播放了代码，但 glyphicon-remove 类仍然存在。

Answer 1

不确定您到底要做什么:只需从已更改的 <input> 的父级中删除 .has-error 类即可？

$('.input-group .form-control').change( function() {
$(this).parent().removeClass('has-error');
});