Java语言中的For循环（document.getElementById）

Question

我有一个Javascript问题。 而不是使用此：

document.getElementById("hoverinv1").style.display = "";
document.getElementById("hoverinv2").style.display = "";
document.getElementById("hoverinv3").style.display = "";
document.getElementById("hoverinv4").style.display = "";
document.getElementById("hoverinv5").style.display = "";
document.getElementById("hoverinv6").style.display = "";
document.getElementById("hoverinv7").style.display = "";
document.getElementById("hoverinv8").style.display = "";
document.getElementById("hoverinv9").style.display = "";
document.getElementById("hoverinv10").style.display = "";

我想用这个：

for (var x = 0; x < 11; x++) {
    document.getElementById("hoverinv" + x).style.display="";
}

再次显示所有内容。 好吧，它什么也没做，我也不知道问题出在哪里。

Answer 1

因为hoverinv0不存在，所以可能在第一次迭代时抛出错误。 你要

for (var x = 1; x < 11; x++) {
  document.getElementById("hoverinv" + x).style.display="";
}

Answer 2

只需在CSS中完成：

[id^=hoverinv] {
  display: block; /* or any other needed display value */
}

您的问题：通过在控制台中检查JS，您可以清楚地看到它在获取hoverinv0 ID元素（ 不存在 ）时破裂。

你能做什么：

为您的所有元素分配一个class class="hoverinv"并进行以下操作：

var hoverInv = document.getElementsByClassName("hoverinv");
for (var i=0; i<hoverInv.length; i++){
     hoverInv[i].style.display = "";
}

或使用

var hoverInv = document.querySelectorAll("[id^=hoverinv]");
for (var i=0; i<hoverInv.length; i++){
     hoverInv[i].style.display = "";
}

否则，一旦更改元素数量，您可能会再次解决所有问题 ：

for(var i=1; i<11; i++){
   document.getElementById("hoverinv"+ i).style.display = "";
}

Answer 3

您的第一个代码以"hoverinv1"开头，并且在循环中以"hoverinv0"开头。

可能是找不到元素，返回undefined ，然后在尝试访问style属性时脚本崩溃。

检查浏览器的控制台，它应该发出错误或其他信息。