Question

我有一个包含罗马的SVG文件。在我的索引上我有一些选择。如果您单击其中一个，它会更改具有特定类别的所有rects的颜色。

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')）上写下实际名称，它就可以了。我不知道如何用变量做到这一点。我收到“意外标识符”错误。谢谢！

Answer 1

您正在寻找以下

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

就像现在一样，你实际上并没有将你的变量传递给querySelector，你只是用字符串文字."className" rect来调用它。

Javascript - 带有var的querySelectorAll

1 个答案: