使用 document.getElementById 与部分 ID 名称

Question

希望你能帮我解决这个问题...我的代码：

function showIt() {
  document.getElementById("gatewayContainerstacks_in_9_page4").style.visibility = "hidden";
}
setTimeout("showIt()", 2500); // after 2.5 sec

我想在2.5秒后隐藏一个div。这个功能已经正常工作了，但问题是我要定位的div是动态的。只有第一个单词总是相同的（gatewayContainerstacks）。之后的ID是动态的（即_in_9_page4部分）。是否有一种方法可以使代码搜索以gatewayContainerstacks开头的div？我会感激任何提示.. 谢谢...

- Gerard

Answer 1

使用 document.querySelector() 结合 CSS 属性选择器 ^= 来匹配以所需前缀开头的元素的 ID：

function showIt() {
  document.querySelector('[id^="gatewayContainerstacks"]').style.visibility = "hidden";
}
setTimeout(showIt, 2500);

在这里，我将函数 showIt 作为参数传递给 setTimeout，而不是将它作为字符串传递。如需了解原因，请参见 MDN 上关于 setTimeout 的说明。

- ComFreek

---

如果搜索的术语位于ID的中间而不是开头，该怎么办？ - Rodrigo

@Rodrigo 你可以使用 CSS 属性选择器 *= 来匹配包含某个字符串的属性。 - ComFreek

Answer 2

首先，你永远不应该将一个字符串传递给 setTimeout。在这种情况下，你只需要传递 showIt（没有括号！）就可以正常工作。

至于你实际的问题，你可以尝试像这样做：

document.querySelector("[id^=gatewayContainerstacks]").style.visibility = "hidden";

请注意，这在Internet Explorer 8之前的版本中不起作用，并且在一些旧的移动浏览器中也可能无法正常工作。

为了实现更普适的解决方案，建议给元素分配一个独特且已知的ID，然后将其他信息存储在data-*属性中：

<div id="gatewayContainerstacks" data-in="9" data-page="4">...</div>

或者类似于这样的东西。

- Niet the Dark Absol