javascript - 'querySelectorAll' 上的无效选择器使用变量作为 id

Question

我有通过变量传递的动态 ID。不幸的是，当尝试将它引用到 querySelectorAll 时，我收到一个错误:

Failed to execute 'querySelectorAll' on 'Document':'#paragraph-1 .is-available"' is not a valid selector.

我的代码如下

var x = ('"#' + dataID + ' is-available"');
var test = document.querySelectorAll (x);
console.log(test);

当我查看控制台日志时，它会将其正确输出到:

#paragraph-1 .is-available

知道如何将变量引用到我的 querySelectorAll 中吗？

Answer 1

两件事:

1. 去掉选择器中的双引号
2. 在 is-available 的选择器中添加用 . 替换空格。

您应该使用此选择器获得正确的结果:

document.querySelectorAll('#' + dataID + '.is-available');

更新:

不清楚是选择指定ID的元素的所有子元素，还是选择指定ID和class的所有元素。如果要选择子元素，请保留空白并将 . 添加到 is-available。使您的代码如下:

document.querySelectorAll('#' + dataID + ' .is-available');