将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。它工作正常，但问题是我想要的目标是动态的。只有第一个单词总是相同的（gatewayContainerstacks）。之后，ID是动态的（_in_9_page4部分）。有没有办法让代码搜索从gatewayContainerstacks开始的div？我很感激提示......谢谢......

Answer 1

使用document.querySelector()：

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

顺便说一句，请不要将showIt()放在引号中，更好地引用函数本身：

setTimeout(showIt, 2500);

Answer 2

好吧，首先，你不应该将一个字符串传递给setTimeout。在这种情况下，你可以传递showIt（没有括号！）它会正常工作。

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

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

但请记住，这在版本8之前的Internet Explorer中不起作用，也可能在某些较旧的移动浏览器中不起作用。

对于更通用的解决方案，我建议提供唯一且已知的ID，然后将其他信息放入data-*属性中：

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

或类似的东西。