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>

在我尝试.each()解决方案here

之后，我的想法来自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'); });

Answer 2

如果元素具有类

，则可以简单地附加事件

JSnippet Demo

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

Answer 3

您需要做一些更改：

$('.form-control').find('input[type="text"]').on('input', function() {
     $(this).closest('.input-group').removeClass('has-error');        
});

而不是change事件在输入类型文本上使用keydown，因为只有当您从元素中释放焦点时才会发生更改事件。
使用$(this)进入具有.closest()的所需父级的上下文，然后从中删除该类。

＆＃13;

$(':input').on('input', function(e){
    console.log('type', e.type);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' >

＆＃13;

Answer 4

使用$(document).on('input'...监控动态和静态元素的所有更改：

$(document).on('input', '.form-control', function(){
  $(this).closest('.input-group').removeClass('has-error');
});

当字段被更改时，removeClass（“has-error”）Bootstrap，javascript

我的Javascript

我的表格

4 个答案: