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="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属性时脚本崩溃。

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

对于Javascript中的循环（document.getElementById）

3 个答案: