根据匹配数字删除/添加类别

Question

当地址字段中没有数字时，我正在努力删除/添加类。当字段中没有数字时，类：“ok-form”将被删除，类：“error-form”必须添加。如果我只是$(this).removeClass('ok-form').addClass('error-form');在这部分（第 12 行）之后添加：if (!$(this).val().match(/\d+/)) {它不起作用。有人有想法吗？ $('input[name="shipping_address[address1]"], input[name="payment_address[address1]"]').on('blur', function() {        $(this).removeClass('ok-form error-form');        if ($(this).siblings('.supercheckout-required').css('display') == "none" && $(this).val() == '') {            $(this).removeClass('ok-form error-form');        } else if ($(this).val() == '') {            $(this).removeClass('ok-form').addClass('error-form');            $(this).parent().append('<span class="errorsmall">' + required_error + '</span>');        } else if (!validateAddress($(this).val())) {            $(this).removeClass('ok-form').addClass('error-form');            $(this).parent().append('<span class="errorsmall">' + invalid_address + '</span>');        } else if (validateAddress($(this).val())) {            if (!$(this).val().match(/\d+/)) {                if (!$(this).parent().find('.warningsmall').length)                    $(this).parent().append('<span class="warningsmall">' + street_number_warning + '</span>');            } else {                $(this).parent().find('.warningsmall').remove();            }            $(this).removeClass('error-form').addClass('ok-form');        }    });

Answer 1

该块中的最后一行删除了错误表单类，并将 OK 表单类添加回来，使您尝试添加的行本质上是无操作：

else if (validateAddress($(this).val())) {

    if (!$(this).val().match(/\d+/)) {

        // we try swapping classes

        $(this).removeClass('ok-form').addClass('error-form');

        if (!$(this).parent().find('.warningsmall').length)

            $(this).parent().append('<span class="warningsmall">' + street_number_warning + '</span>');

    } else {

        $(this).parent().find('.warningsmall').remove();

    }

    // this line undoes the class changes

    $(this).removeClass('error-form').addClass('ok-form');

}

事实上，如果您在调试器中单步执行代码，您将看到类切换，然后在到达块末尾时切换回来。

有很多方法可以解决这个问题。一种方法是在该块中保留一个布尔值，然后根据最后的值设置类：

else if (validateAddress($(this).val())) {

    let isErrorState = false;

    if (!$(this).val().match(/\d+/)) {

        isErrorState = true;

        if (!$(this).parent().find('.warningsmall').length)

            $(this).parent().append('<span class="warningsmall">' + street_number_warning + '</span>');

    } else {

        $(this).parent().find('.warningsmall').remove();

    }

    // swap classes

    if (isErrorState) {

        $(this).removeClass('ok-form').addClass('error-form');

    }

    else {

         $(this).removeClass('error-form').addClass('ok-form');

    }

}