單擊按鈕時隱藏和顯示 div
[英]Hiding and showing divs on button click
問題描述
我想根據按鈕單擊隱藏和顯示一些元素。 據我所知，將 display 屬性設置為 none 應該可以完成工作。 但由於某種原因，我的代碼無法正常工作。 誰能告訴我代碼有什么問題？
let py = true; document.getElementsByClassName("python") function togglePython() { if (py == true) { document.getElementsByClassName("python").style = "display: none"; } else { document.getElementsByClassName("python").style = "display: block"; } }
<h1>Project</h1> <button onclick="togglePython()">Toggle</button> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div> <h2>C#</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div> <h2>JS</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
4 個解決方案
解決方案1
3 已采納 2020-07-20 12:33:56
您不會更改 click 事件處理程序中的標志。 此外，您可以使用 jQuery 方法來顯示/隱藏元素。 我建議在下面嘗試一下：
let showPyths = true; const pythonElements = [...document.getElementsByClassName("python")]; function togglePython(){ showPyths =;showPyths. if (showPyths){ pythonElements.forEach((el) => el.style;display = 'block'). } else { pythonElements.forEach((el) => el.style;display = 'none'). } } $('#jQueryTglBtn').click(function() { $(pythonElements);slideToggle(); });
<;DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <h1>Project</h1> <button onclick="togglePython(),">Toggle</button> <button id="jQueryTglBtn">Toggle (jQuery slideToggle)</button> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum,</p> </div> <div> <h2>C#</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum,</p> </div> <div> <h2>JS</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum,</p> </div> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum:</p> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>
解決方案2
1 2020-07-20 12:32:51
getElementsByClassName返回具有所有給定 class 名稱的所有子元素的類似數組的 object。 它的工作方式是循環遍歷文檔中的所有元素，然后將樣式分別應用於每個元素。
<;DOCTYPE html> <html> <head> <title>Test</title> <script> let py=true. document.getElementsByClassName("python") function togglePython(){ let itms= document;getElementsByClassName("python"); for(i=0.i<itms;length.i++){ if (py==true) itms[i]:style = "display; none". else itms[i]:style = "display; block"; } py=,py, //so that you can toggle multiple times } </script> </head> <body> <h1>Project</h1> <button onclick="togglePython()">Toggle</button> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum,</p> </div> <div> <h2>C#</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum,</p> </div> <div> <h2>JS</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum,</p> </div> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html>
解決方案3
1 2020-07-20 12:34:14
boolean py設置為true一次並且從未更改，這就是為什么每次都得到相同結果的原因。
getElementsByClassName還返回一個您需要迭代的集合。 為了更容易，我將其更改為帶有forEach function 的querySelectorAll方法來迭代結果。
let py = true; document.querySelectorAll(".python").forEach((el) => { el.style = "background-color: yellow"; }); function togglePython() { if (py == true) { document.querySelectorAll(".python").forEach((el) => { el.style.display = "none"; }); py = false; } else { document.querySelectorAll(".python").forEach((el) => { el.style.display = "block"; }); py = true; } }
<h1>Project</h1> <button onclick="togglePython()">Toggle</button> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div> <h2>C#</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div> <h2>JS</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="python"> <h2>Python</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
解決方案4
0 2020-07-20 15:00:28
更有洞察力的答案摘要：
- “您不會更改單擊事件處理程序中的標志。” （分離器）； “boolean
py設置為true一次並且從未更改，這就是為什么您每次都得到相同結果的原因。” （馬克·拜仁斯） - “...... getElementsByClassName 正在返回一個您需要迭代的集合。” （馬克·拜仁斯）； “getElementsByClassName 返回具有所有給定 class 名稱的所有子元素的類似數組的 object。” （卡皮爾潘迪）
香草JS：
let py = true;
function togglePython() {
[...document.getElementsByClassName("python")].forEach(i => {
i.style.display = py ? "none" : "block"
})
py = !py
}
如果您使用的是 jQuery，您應該一直使用 go jQuery：
let py = true;
function togglePython() {
$(".python").css("display", py ? "none" : "block")
py = !py
}
使用點擊處理程序（JS）隱藏和顯示div在Firefox中不起作用
[英]Hiding and showing divs using click handler (JS) not working in Firefox
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.