我有一個生成多個 DIV id="toggle_panel" 的查詢，我知道我可以有效地動態更改 DIV 的 ID。下面是直接來自 w3schools 的腳本，開箱即用，效果很好......僅適用于第一個 DIV 和第一個 DIV。如何將查詢中的動態變量應用到我的腳本？第二個問題：如何才能讓DIV默認隱藏？function myFunction() { var x = document.getElementById("toggle_panel"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; }}
3 回答
鳳凰求蠱
TA貢獻1825條經驗 獲得超4個贊
對于你的第一個問題，使用類來標記類似 html 元素的集合會更合適。
所以你的 div 應該看起來像這樣：
<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>
然后您就可以使用document.getElementsByClassName('toggle_panel')它們來訪問它們。
另外，為了默認隱藏它們，您可以使用 css 來定位您的類，如下所示。
.toggle_panel {
display: none;
}
墨色風雨
TA貢獻1853條經驗 獲得超6個贊
正如評論中提到的，一個 ID 只能有一個實例。為了達到您想要的結果，您必須將 更改<div id="toggle_panel">content</div>為<div class="toggle_panel">content</div>。然后使用以下 JavaScript：
function myFunction() {
var panels = document.getElementsByClassName("toggle_panel");
for(var i = 0; i < panels.length; i++) {
var panel = panels[i];
if (panel.style.display === "none") {
panel.style.display = "block";
} else {
panel.style.display = "none";
}
}
}
慕沐林林
TA貢獻2016條經驗 獲得超9個贊
我認為你應該使用querySelectorAll('toggle_panel')，你的代碼將是這樣的：
Array.from(document.querySelectorAll('toggle_panel')).forEach((element) => {
element.display = 'none'})- 3 回答
- 0 關注
- 252 瀏覽
添加回答
舉報
0/150
提交
取消