= 하나의 클래스이지만 두 개의 클래스가있는 경우

Question

두 개의 다른 클래스를 확인하는 유효성 검사 스크립트가 있습니다. onmouseover 배열을 생성하는 일부 선택 상자에 대해 추가 클래스를 추가하려고합니다. 문제는 선택 상자에 유효성 검사, 배열 검사, 두 개의 클래스가 있으며 정확한 이름이 아니라면 스크립트가이를 인식하지 못한다는 것입니다. ==를 사용하면 전혀 작동하지 않지만 =을 사용하면 내 페이지의 모든 요소를 ​​검증합니다. 클래스가없는 경우에도 마찬가지입니다.

이 스크립트를 사용하여 나머지 페이지를 손상시키지 않고 가장 효율적으로 만들 수 있는지 궁금합니다.

이것은 HTML 여기

<div class="select-styled"> 
    <select id="pm" name="pm" class="selValidate pmpop" onmouseover="pmpop();"> 
     <option value="Foo">Foo</option> 
     <option value="">- Remove -</option> 
    </select> 
</div> 

의 예

for (i=0; i<thisform.elements.length; i++) { 
     if (thisform.elements[i].className = "selValidate" || thisform.elements[i].className == "req" || thisform.elements[i].className == "valfocus") { 
//do stuff 
    } 
} 

Answer 1

가 왜 match()를 사용하지 않는 검증 스크립트입니다? 그것은 그렇게 때문에

if (thisform.elements[i].className.match('selValidate')) { 
    // do stuff 
} 

당신은 if에 할당 연산자를 사용할 수 없습니다 ... 는을 할당합니다. ==은 비교 연산자입니다. 그러나 하나의 CSS 클래스가 많은 요소를 가지고 있는지 확인하고 싶습니다.

그래서 match()은 두 문자열 리터럴을 비교하지 않고 문자열 내에서 문자열을 검색 할 때 더 잘 작동합니다. 그들이 동등한 지보십시오.

또한 match()은 강력한 수있는 정규 표현식을 허용 할 수 있습니다. :)

편집 :

당 바니의 코멘트, 내가 (앞서 언급 한 바와 같이) 당신이 유사한 클래스 이름이있을 수 있습니다 어디 잘못된 일치를 방지하기 위해 정규 표현식을 사용하는 것이 좋습니다 (예 : selValidate 및 selValidateOff 또는 그와 비슷한 것).

if (thisform.elements[i].className.match(/\bselValidate\b/)) { 
    // now, really do stuff 
} 

둘 다 좋습니다. 나는 당신의 검색이 얼마나 좁혀 질까에 달려 있습니다.

Here is a nice cheat sheet JavaScript의 정규 표현식 시작하기. 당신이 유일한 솔루션을 사용 hasClass을 사용하여 클래스의 존재를 확인하는 데 도움이 라이브러리 classie을 자바 스크립트를 원하는 경우에 당신이 jQuery를 사용하는 경우

Answer 2

는

$(thisform.elements[i]).hasClass('selValidate'); 

를 사용하여 클래스의 존재를 대신 클래스 이름을 비교 확인() 메소드를 호출합니다.

Answer 3

DOM 방식은 classList입니다.

thisform.elements[ i ].className.match(/\bselValidate\b/); 

편집 : 당신은 오래된 브라우저를 지원해야 정규식과 className 사용하는 경우

thisform.elements[ i ].classList.contains('selValidate'); 

: after running a few tests on jsperf, 그것은 나타납니다 만 10 + IE에 대한 관심이 경우, 당신의 최선의 방법입니다 classList은 대개 훨씬 빠릅니다 (유일한 브라우저는 IE11입니다). 이러한 이유 때문에 - classList.contains은 문제의 작업을 정확하게 수행하도록 설계된 API이기 때문에 (className.match은 괴롭힘) - IE9 이하를 버릴 수 있다면 classList 메서드를 사용하는 것이 좋습니다.

function hasClass(element, className){ 
    if(element.classList && element.classList.contains){ 
    hasClass = function classList_contains(element, className){ 
     return element.classList.contains(className); 
    } 
    } 
    else { 
    hasClass = function className_match(element, className){ 
     return new RegExp('\\b' + className + '\\b').test(element.className); 
    } 
    } 

    return hasClass(element, className); 
} 

Answer 4

문제는 그 여러 클래스와의 className 속성 목록 공백으로 구분하여 각 클래스 : 당신이 가능한 속도의 혜택을 얻을하지만 여전히 모든 브라우저를 지원하려면

는 여기 polyfill입니다.

<select id="pm" name="pm" class="selValidate pmpop" onmouseover="pmpop();"> 

가 "selValidate pmpop"에 해당하는 className이 있습니다 같은 마크 업.

className을 사용하여 개별 클래스를 찾으려면 문자열 .match 메서드를 사용하여 문자열에서 클래스를 찾을 정규식을 테스트하거나 문자열을 검색 가능한 토큰으로 분리해야합니다. .match의

예 : 검색 토큰으로 문자열을 깨는

for (i = 0; i < thisform.elements.length; i += 1) { 
    if (thisform.elements[i].className.match(/\bselValidate\b|\breq\b|\bvalfocus\b/g) { // relies on .match returning null for no match 
     //do stuff 
    } 
} 

예 :

for (i = 0; i < thisform.elements.length; i += 1) { 
    var allClasses = thisform.elements[i].className.split(' '); 
    if (allClasses.indexOf('selValidate') > -1 || allClasses.indexOf('req') > -1 || allClasses.indexOf('valfocus') > -1) { // relies on ECMAScript 5 Array.indexOf support 
     //do stuff 
    } 
} 

// or 

for (i = 0; i < thisform.elements.length; i += 1) { 
    var allClasses = thisform.elements[i].className.split(' '); 
    for (var j = 0; j < allClasses.length; j += 1) { 
     if (allClasses[j] == 'selValidate' || allClasses[j] == 'req' || allClasses[j] == 'valfocus') { // should work with any browser that supports JavaScript 
      //do stuff 
     } 
    } 
} 

또한 .classList 같은 것을 사용할 수 있지만 내가 what browsers you need to target을 모른다. .classList의

예 : (그게 위해 무엇의) 왼손 운영자에 값을 할당 할 때

for (i = 0; i < thisform.elements.length; i += 1) { 
    if (thisform.elements[i].classList.contains('selValidate') || thisform.elements[i].classList.contains('req') || thisform.elements[i].classList.contains('valfocus')) { // relies on ECMAScript 5 Array.indexOf support 
     //do stuff 
    } 
} 

는 또한 만 =을 사용합니다. ==은 유형 강제 강제적 평등 (또는 "동등한") 테스트이며 ===은 엄격한 (비 강제적 인) 평등 테스트입니다.