Question

我在Javascript中遇到了问题当您删除字段的值或更改它时 jquery效果仍然存在当我从输入中删除值时，有没有办法清除所有更改

这是一个例子 http://enjaz.tech/xlab/progress/ 尝试键入6然后键入2

    $(document).ready(function() {
            $('#submit').click(function(e) {
            e.preventDefault();
           var pram = $('#getId').val()
            $.ajax({
                type: 'POST',
                url: 'call.php?q='+pram,
                success: function(data){

                    for(var i = 0 ; i < data ; i++){
                        var $steps = $('.amg-step');
                        if (i > 0) { $($steps[i - 1]).removeClass('--previous'); }
                        $($steps[i]).removeClass('--active').addClass('--complete').addClass('--previous');
                        if (i < $steps.length) { $($steps[i + 1]).addClass('--active'); }
                    }
                }
            });
        });
});

Answer 1

您需要重置之前添加的所有课程：

var $steps = $('.amg-step').removeClass('--previous').removeClass('--complete').removeClass('--active');

或缩短版的ajax success功能：

var $steps = $('.amg-step').removeClass('--previous --complete --active');
for(var i = 0 ; i < data ; i++){
    if (i > 0) { 
        $($steps[i - 1]).removeClass('--previous'); 
    }
    $($steps[i]).removeClass('--active').addClass('--complete').addClass('--previous');
    if (i < $steps.length) { $($steps[i + 1]).addClass('--active'); }
}

Answer 2

当您的输入为空时，您需要清除所有类，然后只激活第一个类。使用以下代码

$('.amg-step').removeClass('--previous --complete --active'); //to clear all

$('.amg-step:eq(0)').addClass('--active'); // make first one active

将此代码放在您的ajax调用上方

Answer 3

您可以设置全新的类属性

$('.amg-step').attr('class', 'amg-step');

在输入jquery中删除值时清除所有更改

3 个答案: