单击按钮时隐藏和显示 div
[英]Hiding and showing divs on button click
问题描述
I want to hide and show some elements based on a button click.
我想根据按钮单击隐藏和显示一些元素。 As far as I know, setting display property to none should do the work.据我所知，将 display 属性设置为 none 应该可以完成工作。 But for some reason, my code is not working.但由于某种原因，我的代码无法正常工作。 Can anyone tell me what's wrong with the code?谁能告诉我代码有什么问题？
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
You don't change the flag in your click event handler.您不会更改 click 事件处理程序中的标志。 Also, you could use jQuery methods for showing/hiding elements.此外，您可以使用 jQuery 方法来显示/隐藏元素。 I would recommend trying this out below:我建议在下面尝试一下：
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 returns an array-like object of all child elements which have all of the given class name(s). getElementsByClassName返回具有所有给定 class 名称的所有子元素的类似数组的 object。 The way it works is by looping through all of the elements in the document, and then applying the style to each element separately.它的工作方式是循环遍历文档中的所有元素，然后将样式分别应用于每个元素。
<;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
The boolean py is set to true once and never changed that's why you get the same result every time. boolean py设置为true一次并且从未更改，这就是为什么每次都得到相同结果的原因。
Also the getElementsByClassName is returning a collection you need to iterate over. getElementsByClassName还返回一个您需要迭代的集合。 To make it easier I changed it to a querySelectorAll method with a forEach function to iterate over the results.为了更容易，我将其更改为带有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
Summary of the more insightful answers:更有洞察力的答案摘要：
- "You don't change the flag in your click event handler." “您不会更改单击事件处理程序中的标志。” (Splitter); （分离器）； "The boolean
pyis set totrueonce and never changed that's why you get the same result every time."“boolean py设置为true一次并且从未更改，这就是为什么您每次都得到相同结果的原因。” (Mark Baijens)（马克·拜仁斯） - "…the getElementsByClassName is returning a collection you need to iterate over." “...... getElementsByClassName 正在返回一个您需要迭代的集合。” (Mark Baijens); （马克·拜仁斯）； "getElementsByClassName returns an array-like object of all child elements which have all of the given class name(s)." “getElementsByClassName 返回具有所有给定 class 名称的所有子元素的类似数组的 object。” (kapil pandey) （卡皮尔潘迪）
Vanilla JS:香草JS：
let py = true;
function togglePython() {
[...document.getElementsByClassName("python")].forEach(i => {
i.style.display = py ? "none" : "block"
})
py = !py
}
If you're using jQuery, you should go jQuery all the way:如果您使用的是 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 - Hiding/Showing divs on click
单击可显示/隐藏带有Java的Divs - Showing/Hiding Divs with Javascript on click
通过单击按钮显示和隐藏div - showing and hiding divs by clicking a button
隐藏div并启用按钮单击 - Hiding divs and enable on button click
响应按钮单击显示和隐藏文本 - Showing and hiding text in response to a button click
通过选择下拉菜单并单击按钮来隐藏/显示div - Hiding/showing div by selecting dropdown and button click
使用点击处理程序（JS）隐藏和显示div在Firefox中不起作用 - Hiding and showing divs using click handler (JS) not working in Firefox
显示/隐藏嵌套的div - Showing / Hiding nested divs
Javascript：隐藏/显示div - Javascript: Hiding/Showing divs
动态隐藏和显示div - dynamically hiding and showing divs
相关标签