JavaScriptのカラーテキストを変更する

Question

私はjavascriptが新機能であり、以下のこのコードでは異なるクラスの色を変更したいと考えています。私はクラス 'ok'の色が緑色で、クラス 'error'が赤色であるとします。

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

Answer 1

目的のクラスを追加するには、適切な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は、マッチした要素の集合内の各要素に指定されたクラス（複数可）を追加します。それで、あなたが望むものを達成するためにそれを使用してください。

Answer 2

問題は、これが$('#passstrength').className

classNameは、設定または$('#passstrength')としてjQueryオブジェクトであるクラス

を返すために、ネイティブjavascriptの方法で、classNameはこのjQueryオブジェクトでは動作しませんである

しかし、 document.getElementById('passstrength').className='yourClassName'

とjquery addClassと動作しますremoveClassは役に立ちます