如何在JavaScript中使用循环迭代几个元素？

huangapple
go评论110阅读模式
英文:

How to iterate a few elements with loops in JavaScript?

问题

我正在制作一个常见问题解答部分。

目标非常简单：点击问题以展开答案，然后再次点击问题以关闭答案。与此同时，"+" 和 "-" 切换。

我已经让第一个问题可以工作了，但我不知道如何使用循环来迭代它。我尝试了 for 循环，但失败了。

有人可以帮忙吗？

  1. let questionContainer1 = document.querySelector('#question-container-1');
  2. let question1          = document.querySelector('#question-1');
  3. let btn1               = document.querySelector('#btn-1');
  4. let answer1            = document.querySelector('#answer-1');
  6. let buttonSwitch = false;
  8. function toggle() {
  9.   answer1.classList.toggle('toggle-style');
  10.   question1.classList.toggle('toggle-question-style');
  11.   if (buttonSwitch === false) {
  12.     console.log("false");
  13.     btn1.innerHTML = "-";
  14.     buttonSwitch = true;
  15.   } else if (buttonSwitch === true) {
  16.     console.log("true");
  17.     btn1.innerHTML = '+';
  18.     buttonSwitch = false;
  19.   }
  20. }
  22. questionContainer1.addEventListener('click', toggle);
  1. .FAQ-container {
  2.   position: absolute;
  3.   width: 60%;
  4.   top: 50%;
  5.   left: 50%;
  6.   transform: translate(-50%, -50%);
  7.   border: solid 1px;
  8.   display: flex;
  9.   flex-direction: column;
  10.   padding: 1rem;
  11. }
  13. h1 {
  14.   margin: 0 auto;
  15.   padding-bottom: 1rem;
  16.   font-size: 20px;
  17.   text-align: center;
  18. }
  20. .question-container {
  21.   display: flex;
  22.   justify-content: space between;
  23.   font-size: 1em;
  24.   cursor: pointer;
  25. }
  27. hr {
  28.   width: 100%;
  29. }
  31. .answer {
  32.   font-size: .9em;
  33.   margin: 0;
  34.   margin-bottom: 2rem;
  35.   display: none;
  36.   transition: all 1s;
  37. }
  39. .toggle-style {
  40.   display: block;
  41. }
  43. .toggle-question-style {
  44.   font-size: .8em;
  45. }
  1. <div class="FAQ-container">
  2.   <h1>Frequently Asked Questions</h1>
  4.   <div class="question-container" id="question-container-1">
  5.     <div class="question" id="question-1">What is the return policy?</div>
  6.     <div class="btn" id="btn-1">+</div>
  7.   </div>
  8.   <hr />
  9.   <p class="answer" id="answer-1">
  10.     Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  11.   </p>
  12. </div>

（请注意，这只是第一个问题的示例代码，您需要根据需要重复这些代码块以处理其他问题。）

英文:

I'm making an FAQ section.

The goal is pretty simple: click the question to open the answer and then click the question again to close the answer.
At the meantime, the "+" and "-" toggles.

I made it work for the first question, but I don't knonw how to iterate it with loops.
I tried to for loop, but failed.

Can someone help?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let questionContainer1 = document.querySelector(&#39;#question-container-1&#39;);
  2. let question1          = document.querySelector(&#39;#question-1&#39;);
  3. let btn1               = document.querySelector(&#39;#btn-1&#39;);
  4. let answer1            = document.querySelector(&#39;#answer-1&#39;);
  6. let buttonSwitch = false;
  8. function toggle() {
  9.   answer1.classList.toggle(&#39;toggle-style&#39;);
  10.   question1.classList.toggle(&#39;toggle-question-style&#39;);
  11.   if (buttonSwitch === false) {
  12.     console.log(&quot;false&quot;);
  13.     btn1.innerHTML = &quot;-&quot;;
  14.     buttonSwitch = true;
  15.   } else if (buttonSwitch = true) {
  16.     console.log(&quot;true&quot;);
  17.     btn1.innerHTML = &#39;+&#39;;
  18.     buttonSwitch = false;
  19.   }
  20. }
  22. questionContainer1.addEventListener(&#39;click&#39;, toggle);

<!-- language: lang-css -->

  1. .FAQ-container {
  2.   position: absolute;
  3.   width: 60%;
  4.   top: 50%;
  5.   left: 50%;
  6.   transform: translate(-50%, -50%);
  7.   border: solid 1px;
  8.   display: flex;
  9.   flex-direction: column;
  10.   padding: 1rem;
  11. }
  13. h1 {
  14.   margin: 0 auto;
  15.   padding-bottom: 1rem;
  16.   font-size: 20px;
  17.   text-align: center;
  18. }
  20. .question-container {
  21.   display: flex;
  22.   justify-content: space-between;
  23.   font-size: 1em;
  24.   cursor: pointer;
  25. }
  27. hr {
  28.   width: 100%;
  29. }
  31. .answer {
  32.   font-size: .9em;
  33.   margin: 0;
  34.   margin-bottom: 2rem;
  35.   display: none;
  36.   transition: all 1s;
  37. }
  39. .toggle-style {
  40.   display: block;
  41. }
  43. .toggle-question-style {
  44.   font-size: .8em;
  45. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;FAQ-container&quot;&gt;
  2.   &lt;h1&gt;Frequently Asked Questions&lt;/h1&gt;
  4.   &lt;div class=&quot;question-container&quot; id=&quot;question-container-1&quot;&gt;
  5.     &lt;div class=&quot;question&quot; id=&quot;question-1&quot;&gt;What is the return policy?&lt;/div&gt;
  6.     &lt;div class=&quot;btn&quot; id=&quot;btn-1&quot;&gt;+&lt;/div&gt;
  7.   &lt;/div&gt;
  8.   &lt;hr /&gt;
  9.   &lt;p class=&quot;answer&quot; id=&quot;answer-1&quot;&gt;
  10.     Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  11.   &lt;/p&gt;
  13.   &lt;div class=&quot;question-container&quot; id=&quot;question-container-2&quot;&gt;
  14.     &lt;div class=&quot;question&quot;&gt;When will I receive my order?&lt;/div&gt;
  15.     &lt;div class=&quot;btn&quot; id=&quot;btn-2&quot;&gt;+&lt;/div&gt;
  16.   &lt;/div&gt;
  17.   &lt;hr /&gt;
  18.   &lt;p class=&quot;answer&quot; id=&quot;answer-2&quot;&gt;
  19.     Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  20.   &lt;/p&gt;
  22.   &lt;div class=&quot;question-container&quot; id=&quot;question-container-3&quot;&gt;
  23.     &lt;div class=&quot;question&quot;&gt;Where are you located&lt;/div&gt;
  24.     &lt;div class=&quot;btn&quot; id=&quot;btn-3&quot;&gt;+&lt;/div&gt;
  25.   &lt;/div&gt;
  26.   &lt;hr /&gt;

<!-- end snippet -->

答案1

得分: 0

为使您的FAQ部分具有动态性并遍历所有问题和答案，您可以使用循环向每个问题容器添加事件侦听器。

请按以下方式编写您的脚本：

  1. // 获取所有问题容器
  2. let questionContainers = document.querySelectorAll('.question-container');
  4. // 遍历每个问题容器并添加一个事件侦听器以切换答案的显示
  5. questionContainers.forEach((container) => {
  6.   let question = container.querySelector('.question');
  7.   let btn = container.querySelector('.btn');
  8.   let answer = container.nextElementSibling;
  10.   let buttonSwitch = false;
  11.   function toggle(){
  12.     answer.classList.toggle('toggle-style');
  13.     question.classList.toggle('toggle-question-style');
  14.     if(buttonSwitch === false){
  15.       btn.innerHTML = "-";
  16.       buttonSwitch = true;
  17.     } else if (buttonSwitch === true) {
  18.       btn.innerHTML = '+';
  19.       buttonSwitch = false;
  20.     }
  21.   }
  23.   container.addEventListener('click', toggle);
  24. });

这段代码将通过循环遍历所有问题容器，并为每个容器添加一个点击事件侦听器，以切换答案的显示。

英文:

To make your FAQ section dynamic and iterate through all the questions and answers, you can use a loop to add event listeners to each question container.

Write your script as follows:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. // Get all the question containers
  2. let questionContainers = document.querySelectorAll(&#39;.question-container&#39;);
  4. // Loop through each question container and add an event listener to toggle the answer
  5. questionContainers.forEach((container) =&gt; {
  6.   let question = container.querySelector(&#39;.question&#39;);
  7.   let btn = container.querySelector(&#39;.btn&#39;);
  8.   let answer = container.nextElementSibling;
  10.   let buttonSwitch = false;
  11.   function toggle(){
  12.     answer.classList.toggle(&#39;toggle-style&#39;);
  13.     question.classList.toggle(&#39;toggle-question-style&#39;);
  14.     if(buttonSwitch === false){
  15.       
  16.       btn.innerHTML = &quot;-&quot;;
  17.       buttonSwitch = true;
  18.     } else if (buttonSwitch === true) {
  19.       
  20.       btn.innerHTML = &#39;+&#39;;
  21.       buttonSwitch = false;
  22.     }
  23.   }
  25.   container.addEventListener(&#39;click&#39;, toggle);
  26. });

<!-- end snippet -->

答案2

得分: 0

你不必创建那么多变量，但你可以查询所有元素并将相同的事件侦听器添加到每个元素上。

请注意，我将问题和答案包装在一个名为.question的容器中。

  1. document.querySelectorAll('.question-container')
  2.   .forEach((e) => e.addEventListener('click', toggle));
  4. function toggle(event) {
  6.   const questionContainer = event.currentTarget.parentElement;
  7.   const question = event.currentTarget;
  8.   const answer = questionContainer.getElementsByClassName('answer')[0];
  9.   const btn = question.getElementsByClassName('btn')[0];
  10.   
  11.   answer.classList.toggle('toggle-style');
  12.   question.classList.toggle('toggle-question-style');
  13.   
  14.   if (btn.innerHTML === '+') {
  15.     btn.innerHTML = "-";
  16.   } else {
  17.     btn.innerHTML = '+';
  18.   }
  19. }
  1. .FAQ-container {
  2.   position: absolute;
  3.   width: 60%;
  4.   top: 50%;
  5.   left: 50%;
  6.   transform: translate(-50%, -50%);
  7.   border: solid 1px;
  8.   display: flex;
  9.   flex-direction: column;
  10.   padding: 1rem;
  11. }
  13. h1 {
  14.   margin: 0 auto;
  15.   padding-bottom: 1rem;
  16.   font-size: 20px;
  17.   text-align: center;
  18. }
  20. .question-container {
  21.   display: flex;
  22.   justify-content: space between;
  23.   font-size: 1em;
  24.   cursor: pointer;
  25. }
  27. hr {
  28.   width: 100%;
  29. }
  31. .answer {
  32.   font-size: .9em;
  33.   margin: 0;
  34.   margin-bottom: 2rem;
  35.   display: none;
  36.   transition: all 1s;
  37. }
  39. .toggle-style {
  40.   display: block;
  41. }
  43. .toggle-question-style {
  44.   font-size: .8em;
  45. }
  1. <div class="FAQ-container">
  2.   <h1>Frequently Asked Questions</h1>
  4.   <div class="question">
  5.     <div class="question-container" id="question-container-1">
  6.       <div class="question" id="question-1">What is the return policy?</div>
  7.       <div class="btn" id="btn-1">+</div>
  8.     </div>
  9.     <hr />
  10.     <p class="answer" id="answer-1">
  11.       Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  12.     </p>
  13.   </div>
  14.   <div class="question">
  15.     <div class="question-container" id="question-container-2">
  16.       <div class="question">When will I receive my order?</div>
  17.       <div class="btn" id="btn-2">+</div>
  18.     </div>
  19.     <hr />
  20.     <p class="answer" id="answer-2">
  21.       Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  22.     </p>
  23.   </div>
  24.   <div class="question">
  25.     <div class="question-container" id="question-container-3">
  26.       <div class="question">Where are you located</div>
  27.       <div class="btn" id="btn-3">+</div>
  28.     </div>
  29.     <hr />
  30.     <p class="answer" id="answer-3">
  31.       Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  32.     </p>
  33.   </div>
  34. </div>
英文:

You don't have to create so many variables but you can query all the elements and add the same event listener to each of them.

Please note that I wrapped the questions and answers in a container called .question

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. document.querySelectorAll(&#39;.question-container&#39;)
  2.   .forEach((e) =&gt; e.addEventListener(&#39;click&#39;, toggle));
  4. function toggle(event) {
  6.   const questionContainer = event.currentTarget.parentElement;
  7.   const question = event.currentTarget;
  8.   const answer = questionContainer.getElementsByClassName(&#39;answer&#39;)[0];
  9.   const btn = question.getElementsByClassName(&#39;btn&#39;)[0];
  10.   
  11.   answer.classList.toggle(&#39;toggle-style&#39;);
  12.   question.classList.toggle(&#39;toggle-question-style&#39;);
  13.   
  14.   if (btn.innerHTML === &#39;+&#39;) {
  15.     btn.innerHTML = &quot;-&quot;;
  16.   } else {
  17.     btn.innerHTML = &#39;+&#39;;
  18.   }
  19. }

<!-- language: lang-css -->

  1. .FAQ-container {
  2.   position: absolute;
  3.   width: 60%;
  4.   top: 50%;
  5.   left: 50%;
  6.   transform: translate(-50%, -50%);
  7.   border: solid 1px;
  8.   display: flex;
  9.   flex-direction: column;
  10.   padding: 1rem;
  11. }
  13. h1 {
  14.   margin: 0 auto;
  15.   padding-bottom: 1rem;
  16.   font-size: 20px;
  17.   text-align: center;
  18. }
  20. .question-container {
  21.   display: flex;
  22.   justify-content: space-between;
  23.   font-size: 1em;
  24.   cursor: pointer;
  25. }
  27. hr {
  28.   width: 100%;
  29. }
  31. .answer {
  32.   font-size: .9em;
  33.   margin: 0;
  34.   margin-bottom: 2rem;
  35.   display: none;
  36.   transition: all 1s;
  37. }
  39. .toggle-style {
  40.   display: block;
  41. }
  43. .toggle-question-style {
  44.   font-size: .8em;
  45. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;FAQ-container&quot;&gt;
  2.   &lt;h1&gt;Frequently Asked Questions&lt;/h1&gt;
  4.   &lt;div class=&quot;question&quot;&gt;
  5.     &lt;div class=&quot;question-container&quot; id=&quot;question-container-1&quot;&gt;
  6.       &lt;div class=&quot;question&quot; id=&quot;question-1&quot;&gt;What is the return policy?&lt;/div&gt;
  7.       &lt;div class=&quot;btn&quot; id=&quot;btn-1&quot;&gt;+&lt;/div&gt;
  8.     &lt;/div&gt;
  9.     &lt;hr /&gt;
  10.     &lt;p class=&quot;answer&quot; id=&quot;answer-1&quot;&gt;
  11.       Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  12.     &lt;/p&gt;
  13.   &lt;/div&gt;
  14.   &lt;div class=&quot;question&quot;&gt;
  15.     &lt;div class=&quot;question-container&quot; id=&quot;question-container-2&quot;&gt;
  16.       &lt;div class=&quot;question&quot;&gt;When will I receive my order?&lt;/div&gt;
  17.       &lt;div class=&quot;btn&quot; id=&quot;btn-2&quot;&gt;+&lt;/div&gt;
  18.     &lt;/div&gt;
  19.     &lt;hr /&gt;
  20.     &lt;p class=&quot;answer&quot; id=&quot;answer-2&quot;&gt;
  21.       Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  22.     &lt;/p&gt;
  23.   &lt;/div&gt;
  24.   &lt;div class=&quot;question&quot;&gt;
  25.     &lt;div class=&quot;question-container&quot; id=&quot;question-container-3&quot;&gt;
  26.       &lt;div class=&quot;question&quot;&gt;Where are you located&lt;/div&gt;
  27.       &lt;div class=&quot;btn&quot; id=&quot;btn-3&quot;&gt;+&lt;/div&gt;
  28.     &lt;/div&gt;
  29.     &lt;hr /&gt;
  30.     &lt;p class=&quot;answer&quot; id=&quot;answer-3&quot;&gt;
  31.       Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  32.     &lt;/p&gt;
  33.   &lt;/div&gt;

<!-- end snippet -->

答案3

得分: 0

你现在是我的中文翻译，代码部分不要翻译，只返回翻译好的部分，不要有别的内容，不要回答我要翻译的问题。

以下是要翻译的内容：

"You are cluttering up with way too many lines of code..."

  • 你的代码行数太多，有点混乱...

"This is a typical use case for event delegation (widely explained on StackOverflow), which allows you to add as many questions/answers, without worrying about assigning unnecessary IDs to them."

  • 这是事件委托的典型用例（在StackOverflow上有广泛解释），它允许你添加尽可能多的问题/答案，而无需担心为它们分配不必要的ID。

"I also added a feature to keep only one question/answer open at a time."

  • 我还添加了一个功能，每次只保持一个问题/答案处于展开状态。
英文:

You are cluttering up with way too many lines of code...

This is a typical use case for event delegation (widely explained on StackOverflow), whicth allow you to add as many questions/answers, without worrying about assigning unnecessary IDs to them.

I also added a feature to keep only one question/answer open at a time.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const
  2.   d_FAQ_container = document.querySelector(&#39;div.FAQ-container&#39;)
  3. , All_questions   = d_FAQ_container.querySelectorAll(&#39;.question-container&#39;)
  4.   ;              //   ^--- only it childs
  5.   
  6. d_FAQ_container.addEventListener(&#39;click&#39;, f_toggle );
  8. function f_toggle ( evt )
  9.   {
  10.   let elmRef = evt.target.closest(&#39;.question-container&#39;) || d_FAQ_container;
  11.              //           ^--- check 4 this parent -^
  12.              
  13.   if (!elmRef.matches(&#39;.question-container&#39;) ) return; // exit for others...
  15.   if (elmRef.classList.toggle(&#39;toggle-question-style&#39;) ) // this return a Boolean
  16.     {
  17.     // keep only one question/answer open at a time...
  18.     All_questions.forEach( qElm =&gt;
  19.       qElm.classList.toggle(&#39;toggle-question-style&#39;, qElm === elmRef ));
  20.     }                                              //      ^-- force
  21.   }

<!-- language: lang-css -->

  1. .FAQ-container {
  2.   position       : absolute;
  3.   width          : 60%;
  4.   top            : 50%;
  5.   left           : 50%;
  6.   transform      : translate(-50%, -50%);
  7.   border         : solid 1px;
  8.   display        : flex;
  9.   flex-direction : column;
  10.   padding        : 1rem;
  11.   }
  12. h1 {
  13.   margin         : 0 auto;
  14.   padding-bottom : 1rem;
  15.   font-size      : 20px;
  16.   text-align     : center;
  17.   }
  18. div.question-container {
  19.   display         : flex;
  20.   justify-content : space-between;
  21.   font-size       : 1em;
  22.   cursor          : pointer;
  23.   }
  24. div.question-container.toggle-question-style {
  25.   font-size : .8em;
  26.   }
  27. div.question-container &gt; div.btn::before {
  28.   content : &#39;+&#39;;
  29.   }
  30. div.question-container.toggle-question-style &gt; div.btn::before {
  31.   content : &#39;-&#39;;
  32.   }
  33. hr {
  34.   width : 100%;
  35.   }
  36. p.answer {
  37.   font-size      : .9em;
  38.   margin         : 0;
  39.   margin-bottom  : 2rem;
  40.   transition     : all 1s;
  41.   }
  42. div.question-container:not(.toggle-question-style) + hr + p.answer {
  43.   display : none;
  44.   }

<!-- language: lang-html -->

  1. &lt;div class=&quot;FAQ-container&quot;&gt;
  2.     &lt;h1&gt;Frequently Asked Questions&lt;/h1&gt;
  4.     &lt;div class=&quot;question-container&quot; &gt; &lt;!-- no needs to use ID --&gt;
  5.       &lt;div class=&quot;question&quot;&gt;What is the return policy?&lt;/div&gt;
  6.       &lt;div class=&quot;btn&quot;&gt;&lt;/div&gt;  &lt;!-- use css ::before to add &#39;+&#39; or &#39;-&#39; --&gt;
  7.     &lt;/div&gt;
  8.     &lt;hr&gt;
  9.     &lt;p class=&quot;answer&quot;&gt;  &lt;!-- no needs to use ID --&gt;
  10.       Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  11.     &lt;/p&gt;
  12.   
  13.     &lt;div class=&quot;question-container&quot; &gt;
  14.       &lt;div class=&quot;question&quot;&gt;When will I receive my order?&lt;/div&gt;
  15.       &lt;div class=&quot;btn&quot;&gt;&lt;/div&gt;
  16.     &lt;/div&gt;
  17.     &lt;hr&gt;
  18.     &lt;p class=&quot;answer&quot;&gt;
  19.       Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  20.     &lt;/p&gt;
  21.   
  22.     &lt;div class=&quot;question-container&quot; &gt;
  23.       &lt;div class=&quot;question&quot;&gt;Where are you located&lt;/div&gt;
  24.       &lt;div class=&quot;btn&quot;&gt;&lt;/div&gt;
  25.     &lt;/div&gt;
  26.     &lt;hr&gt;
  27.     &lt;p class=&quot;answer&quot; &gt;
  28.       Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  29.     &lt;/p&gt;
  30.   &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月3日 22:53:08
  • 转载请务必保留本文链接：https://go.coder-hub.com/75628585.html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定