2015-01-03 2 views
-1

나는 로마 rects와 SVG 파일이 있습니다. 색인에 몇 가지 옵션이 있습니다. 그 중 하나를 클릭하면 특정 클래스의 모든 직사각형의 색상이 변경됩니다.자바 스크립트 - querySelectorAll과 함께

SVG

<a id="option1" onclick="filter('Shape')">Option 1</a> 

JS가

function filter(className){ 
    var rectColor = document.querySelectorAll('."className" rect'); 

    for (var i = 0; i < rectColor.length; i++) { 
     rectColor[i].style.fill="#6E6F72"; 
    } 
} 

나는 querySelector (document.querySelectorAll('.Shape rect'))에 실제 이름을 작성하는 경우 작동

<g class="Shape"> 
    <rect x="0" y="0" width="50" height="60"/> 
</g> 

HTML. 변수를 사용하여이를 수행하는 방법을 잘 모르겠습니다. '예기치 않은 식별자'오류가 발생합니다. 감사합니다.

+0

여러 문자열 또는 문자열 변수를 추가하여 원하는 선택자 문자열을 구성하십시오. + className + "rect"' – jfriend00

+0

JavaScript는 PHP가 아닙니다. 문자열에 변수를 포함하려면 문자열 연결을 사용해야합니다. (비록 그 문법이 PHP에서 작동하지 않았을지라도). – JLRishe

답변

1

당신은

var rectColor = document.querySelectorAll('.' + className + ' rect'); 

지금이기 때문에 다음

을 찾고, 당신이 실제로 querySelector에 변수를 전달하지 않는, 당신은 단지 ."className" rect 리터럴 문자열을 호출하고 있습니다.

관련 문제