在javascript中更改颜色文本

Posted 2021-04-14

我是javascript的新手，我想在下面的代码中更改不同类的颜色。我希望例如类'ok'颜色为绿色，类'错误'颜色为红色。

$('#pass').keyup(function (e) {
    var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$", "g");
    var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
    var enoughRegex = new RegExp("(?=.{6,}).*", "g");
    if (false == enoughRegex.test($(this).val())) {
        $('#passstrength').html('Minimum 6 znaków');
    } else if (strongRegex.test($(this).val())) {
        $('#passstrength').className = 'ok';
        $('#passstrength').html('Silne!');
    } else if (mediumRegex.test($(this).val())) {
        $('#passstrength').className = 'alert';
        $('#passstrength').html('Średnie!');
    } else {
        $('#passstrength').className = 'error';
        $('#passstrength').html('Słabe!');

    }
    return true;
});

答案

问题在于这个$('#passstrength').className

className是用于设置或返回类的本机javascript方法

如果$('#passstrength')是一个jquery对象，className将无法使用此jquery对象

但它适用于document.getElementById('passstrength').className='yourClassName'

并与jquery addClass和removeClass将工作

另一答案

您需要使用正确的jquery函数来添加所需的类。

$('#pass').keyup(function (e) {
    var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$", "g");
    var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
    var enoughRegex = new RegExp("(?=.{6,}).*", "g");
    if (false == enoughRegex.test($(this).val())) {
        $('#passstrength').html('Minimum 6 znaków');
    } else if (strongRegex.test($(this).val())) {
        $('#passstrength').addClass('ok');
        $('#passstrength').removeClass('alert');
        $('#passstrength').removeClass('error');
        $('#passstrength').html('Silne!');
    } else if (mediumRegex.test($(this).val())) {
        $('#passstrength').addClass('alert');
        $('#passstrength').removeClass('ok');
        $('#passstrength').removeClass('error');
        $('#passstrength').html('Średnie!');
    } else {
        $('#passstrength').addClass('error');
        $('#passstrength').removeClass('ok');
        $('#passstrength').removeClass('alert');
        $('#passstrength').html('Słabe!');

    }
    return true;
});

addClass将指定的类添加到匹配元素集中的每个元素。所以用它来实现你想要的。