首页 > 解决方案 > 如何将 querySelectorAll 与变量一起使用?

问题描述

我有两个相互替代的 HTML 元素,我正在尝试编写一个 JS 函数,如果另一个存在则删除一个(它们起源于TEI 文档中的内部<sic><corr>下方的单词)。<choice>在我的转换中,它们都被分配了一个带有唯一前缀的代码(不是: 是随机生成的,并且必须保留用于其他目的@id@id

<a id="abc" choicePOS="sic0">Element1</a>
<a id="xyz" choicePOS="corr0">Element2</a>

在“属于”Element1 的 JS 函数中,我想选择 Element2 以将其删除。这是我尝试过的(el是 element1):

var choicePOS = el.getAttribute("choicePOS").slice(3); // produces 0
var corrID = "corr" + choicePOS; // produces corr0
var corr = document.querySelectorAll("a[choicePOS=corrID]");

这失败了,可能是因为corrID最后一行中的变量在引号中并且被视为字符串。我已经阅读了有关 CSS 选择器的各种教程,但找不到任何关于如何将它们与可变属性值一起使用的指导。这可能吗?如果是这样,怎么做?如果没有,还有其他选择吗?

编辑:关于如何在 JS 中将字符串与变量连接起来的许多其他问题已被建议作为此问题的重复项。为了澄清,我特别询问querySelectorAll,因为我找不到任何与变量一起使用的示例。如果答案是它的选择器将被视为任何其他 JS 字符串(即可以连接变量),那么这是完全令人满意的。

标签: javascripthtmlcss

解决方案


使用模板文字来评估

var corr = document.querySelectorAll(`a[choicePOS=${corrID}]`);

推荐阅读