时间戳

首页 > 解决方案 > 根据匹配数字删除/添加类

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

问题描述

当地址字段中没有数字时，我正在为删除/添加类而苦苦挣扎。当字段中没有数字时，必须删除类：'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');
        }
    });

标签： javascriptmatch

解决方案

您在该块中的最后一行删除了错误表单类并添加了 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');
}

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

如果您不熟悉调试器的使用，我强烈建议您研究一下，因为它在遇到诸如此类的问题时会很有帮助：

  • Chrome 调试器指南：https ://developers.google.com/web/tools/chrome-devtools/javascript （具体来说，查看“在调试器中暂停”部分）

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

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');
    }
}

推荐阅读