使用 Javascript 显示和隐藏元素
[英]Showing and Hiding elements using Javascript
问题描述
So I have to create this program where i need to create a "People also asked for" feature (This will hide the answers by default, and if the questions is clicked, it will show the answer for that specific question), however i don't know how to hide and show elements using my own toggleDisplay() and toggleAnswer() function.
所以我必须创建这个程序，我需要在其中创建一个“人们还要求”功能（默认情况下这将隐藏答案，如果单击问题，它将显示该特定问题的答案），但是我不'不知道如何使用我自己的 toggleDisplay() 和 toggleAnswer() function 隐藏和显示元素。 Im having a hard time since I'm pretty much new to JavaScript.我很难过，因为我对 JavaScript 非常陌生。
Here is my code:这是我的代码：
<head> <script> function toggleDisplay(elem) { // This is to toggle the display of elem between "block" and "none". } function toggleAnswer(e) { /* This is where it will get the question div that was clicked and use it to then get the answer div. Send the answer div to toggleDisplay(). */ } window.addEventListener('load', function(e) { var questions = document.querySelectorAll('.question'); for (question of questions) { question.addEventListener('click', toggleAnswer); } }); </script> <title>People Also Ask</title> </head> <body id="people-also-ask"> <main> <h1>People also ask</h1> <ul id="questions"> <li> <div class="question"> How do I enable JavaScript Chrome? </div> <div class="answer"> <p><strong>If you'd like to turn JavaScript off or on for all sites:</strong></p> <ol> <li>Click the Chrome menu in the top right-hand corner of your browser.</li> <li>Select Settings.</li> <li>Click Show advanced settings.</li> <li>Under the "Privacy" section, click the Content settings button.</li> </ol> </div> <div class="question"> What do you use JavaScript for? </div> <div class="answer"> <p><strong>Webpages</strong></p> <ol> <li>JavaScript is commonly used for creating web pages. It allows us to add dynamic behavior to the webpage and add special effects to the webpage. On websites, it is mainly used for validation purposes. JavaScript helps us to execute complex actions and also enables the interaction of websites with visitors. </ol> </div> <div class="question"> What does JavaScript do? </div> <div class="answer"> <p><strong>JavaScript</strong></p> <ol> <li>JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)</li> </ol> </div> <div class="question"> Is it useful to learn JavaScript? </div> <div class="answer"> <p><strong>Why learn JavaScript?</strong></p> <ol> <li>The most obvious reason for learning JavaScript is if you have hopes of becoming a web developer. Even if you haven't got your heart set on a tech career, being proficient in this language will enable you to build websites from scratch—a pretty useful skill to have in today's job market! </ol> </div> </li> </main></body>
Any help would be very much appreciated!任何帮助将不胜感激！ Thankyou!谢谢！
2 个解决方案
解决方案1
0 2022-01-13 18:48:50
The best way to show / hide elements, as you correctly pointed out, is by modifying the CSS attribute display .正如您正确指出的那样，显示/隐藏元素的最佳方法是修改 CSS 属性display 。
Now, in your case I would add a class .hidden that you add to the elements you want to hide.现在，在您的情况下，我将添加一个 class .hidden您添加到要隐藏的元素中。 And then to reveal them, you simply remove that class from the respective element.然后要显示它们，您只需从相应元素中删除 class 即可。
.hidden {
display: none;
}
function toggleElementById(elementId) {
var element = document.getElementById(elementId);
element.classList.toggle("hidden");
}
If you add an ID to each answer and add a target attribute to the question, you can easily get the target ID from the question element.如果为每个答案添加一个 ID，并为问题添加一个目标属性，您可以轻松地从问题元素中获取目标 ID。
<div class="question" target="answer1">
What does JavaScript do?
</div>
<div class="answer" id="answer1">
<!-- ... -->
</div>
function toggleAnswer(e) {
var target = e.target.getAttribute("target");
toggleElementById(target);
}
解决方案2
0 2022-01-13 19:12:28
If answers and questions are correlating you can loop through them while adding listener to either remove or add class with display:none property.如果答案和问题相关，您可以在添加侦听器时循环它们以删除或添加具有display:none属性的 class。 See the snippet.见片段。
const questions = document.querySelectorAll(".question"); const answers = document.querySelectorAll(".answer"); questions.forEach((question, index) => { question.addEventListener("click", () => { let answer = answers[index].classList; answer.contains("hidden")? answer.remove("hidden"): answer.add("hidden"); }); });
.hidden { display:none; }
<main> <h1>People also ask</h1> <ul id="questions"> <li> <div class="question"> How do I enable JavaScript Chrome? </div> <div class="answer hidden"> <p><strong>If you'd like to turn JavaScript off or on for all sites:</strong></p> <ol> <li>Click the Chrome menu in the top right-hand corner of your browser.</li> <li>Select Settings.</li> <li>Click Show advanced settings.</li> <li>Under the "Privacy" section, click the Content settings button.</li> </ol> </div> <div class="question"> What do you use JavaScript for? </div> <div class="answer hidden"> <p><strong>Webpages</strong></p> <ol> <li>JavaScript is commonly used for creating web pages. It allows us to add dynamic behavior to the webpage and add special effects to the webpage. On websites, it is mainly used for validation purposes. JavaScript helps us to execute complex actions and also enables the interaction of websites with visitors. </ol> </div> <div class="question"> What does JavaScript do? </div> <div class="answer hidden"> <p><strong>JavaScript</strong></p> <ol> <li>JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)</li> </ol> </div> <div class="question"> Is it useful to learn JavaScript? </div> <div class="answer hidden"> <p><strong>Why learn JavaScript?</strong></p> <ol> <li>The most obvious reason for learning JavaScript is if you have hopes of becoming a web developer. Even if you haven't got your heart set on a tech career, being proficient in this language will enable you to build websites from scratch—a pretty useful skill to have in today's job market! </ol> </div> </li> </main>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.