Javascript

Question

我有一个带有罗马矩形的 SVG 文件。在我的索引上，我有一些选择。如果你点击其中一个，它会改变所有 rects 的颜色 class.

SVG

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

HTML

<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')) 上写下实际名称，它就可以工作。我不确定如何使用变量来做到这一点。我收到 "unexpected identifier" 错误。谢谢！

Answer 1

您正在寻找以下内容

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

就像现在一样，您实际上并没有将变量传递给 querySelector，您只是使用字符串文字 ."className" rect.

调用它

Javascript - 带有 var 的 querySelectorAll

Javascript - querySelectorAll with a var