Question

我正在尝试执行以下操作，如果一个或多个输入有"woocommerce-invalid"类显示错误“红十字”图标，否则如果所有字段都已完成显示成功“绿色勾选”。

我试过这个，它添加了"checkout-tick-one"但是如果有效则会添加/删除类。

$(".checkout-profile input").each(function () {
    if ($(this).hasClass("woocommerce-invalid")) {
        $('.symbol').addClass('checkout-cross-one');
        $('.symbol').removeClass('checkout-tick-one');
    } else {
        $('.symbol').addClass('checkout-tick-one');
        $('.symbol').removeClass('checkout-cross-one');
    }
});

我需要它来处理以下内容。

.on('blur change', '.input-text, select', function () {
    var $this = $(this);
    var $parent = $this.closest('.form-row');
    var validated = true;

    if ($parent.is('.validate-required')) {
        if ($this.val() == '') {
            $parent.removeClass('woocommerce-validated').addClass('woocommerce-invalid woocommerce-invalid-required-field');

            validated = false;
        }
    }

    if ($parent.is('.validate-email')) {
        if ($this.val()) {

            /* http://stackoverflow.com/questions/2855865/jquery-validate-e-mail-address-regex */
            var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);

            if (!pattern.test($this.val())) {
                $parent.removeClass('woocommerce-validated').addClass('woocommerce-invalid woocommerce-invalid-email');
                validated = false;
            }
        }
    }

    if (validated) {
        $parent.removeClass('woocommerce-invalid woocommerce-invalid-required-field').addClass('woocommerce-validated');
    }
})

因此，如果一个，两个或三个输入具有invlaid类，则符号将显示勾选或交叉依赖，如果正确与否。

我也尝试了，它似乎工作但是当我点击另一个字段时，图标更改，即使通过另一个字段也有无效的类。

.on('blur change', '.input-text, select', function () {
    var $this = $(this);
    var $parent = $this.closest('.form-row');
    var validated = true;
    if ($parent.is('.validate-required')) {
        if ($this.val() == '') {
            $parent.removeClass('woocommerce-validated').addClass('woocommerce-invalid woocommerce-invalid-required-field');
            $('.symbol').addClass('checkout-cross-one');
            $('.symbol').addClass('checkout-tick-one');
            validated = false;
        }
    }
    if ($parent.is('.validate-email')) {
        if ($this.val()) {
            /* http://stackoverflow.com/questions/2855865/jquery-validate-e-mail-address-regex */
            var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);

            if (!pattern.test($this.val())) {
                $parent.removeClass('woocommerce-validated').addClass('woocommerce-invalid woocommerce-invalid-email');
                $('.symbol').addClass('checkout-cross-one');
                $('.symbol').addClass('checkout-tick-one');
                validated = false;
            }
        }
    }
    if (validated) {
        $parent.removeClass('woocommerce-invalid woocommerce-invalid-required-field').addClass('woocommerce-validated');
        $('.symbol').addClass('checkout-tick-one');
        $('.symbol').removeClass('checkout-cross-one');
    }
})

Answer 1

<强> JS

if ($('input').hasClass('woocommerce-invalid')) {
    $('#someDiv').addClass('red-cross');
} else {
    $('#someDiv').addClass('green-tick');
}

<强> CSS

.red-cross{
    background-image: url('red-cross.png');
}
.green-tick{
    background-image: url('green-tick.png');
}

Answer 2

试试这个：

如果输入hasClass woocommerce-invalid，则输入if条件addClass到要显示红叉图标的元素。但为此你需要在你添加的类中添加图像。

if($('input').hasClass('woocommerce-invalid')) {
    // logic here
} else {
    // logic here
}

Answer 3

jQuery的：

$('form')
   .removeClass('invalid')  // remove 'invalid' class from forms
   .filter(':has(.woocommerce-invalid)')  // find forms which have an element with class '.woocommerce-invalid'
   .addClass('invalid');  // add 'invalid' class to these forms

CSS

form { background:url(green-tick.png) 100% 50% no-repeat; }
form.invalid { background-image:url(red-cross.png); }

的jsfiddle： http://jsfiddle.net/Pp6wB/1/

jQuery如果有效显示图标，则显示无效图标

3 个答案: