Javascript - querySelectorAll with a var

Javascript - querySelectorAll with a var

本文关键字：var with querySelectorAll Javascript      更新时间：2023-09-26

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

.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";
   }
}

如果我在查询选择器（document.querySelectorAll('.Shape rect')）上写下实际名称，它可以工作。我不确定如何使用变量来做到这一点。我收到"意外标识符"错误。 谢谢！

您正在寻找以下内容

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

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

相关文章：