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屬性時腳本崩潰。

檢查瀏覽器的控制台，它應該發出錯誤或其他信息。