자바 스크립트의 색상 텍스트 변경

Question

저는 자바 스크립트에서 새로 생겼으며 아래의이 코드에서 다른 클래스의 색상을 변경하고 싶습니다. 나는 예를 들어 클래스 '확인'색상 녹색, 클래스 '오류'색상 빨간색 싶습니다.

$('#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와 객체 인 클래스

를 반환하는 기본 자바 스크립트 방법, className이 JQuery와 객체 작동하지 않습니다 함께

그러나 document.getElementById('passstrength').className='yourClassName'

및 jquery addClass과 함께 작동합니다.removeClass이 작동합니다.