堆栈内存溢出
  繁体   English   中英

单击按钮时隐藏和显示 div

[英]Hiding and showing divs on button click

 原文  2020-07-20 12:24:17  3   4    javascript/ html/ css/ web-frontend

问题描述

我想根据按钮单击隐藏和显示一些元素。 据我所知，将 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
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 单击隐藏/显示div 单击可显示/隐藏带有Java的Divs 通过单击按钮显示和隐藏div 隐藏div并启用按钮单击 响应按钮单击显示和隐藏文本 通过选择下拉菜单并单击按钮来隐藏/显示div 使用点击处理程序（JS）隐藏和显示div在Firefox中不起作用 显示/隐藏嵌套的div Javascript：隐藏/显示div 动态隐藏和显示div
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM