for 루프 방법을 사용하여 드롭다운 또는 FAQ 섹션을 만드는 방법.

For 루프 방법

몇 달 전에 for-loop 방법을 사용하는 방법을 몰랐기 때문에 이 " Front-end mentor challenge "를 해결하는 데 문제가 있었습니다. for-loop 방법과 토글 클래스 사용법을 배운 후에는 공원 산책이 되었습니다.

예이!! 🎉

내가 어떻게했는지 궁금 할 것입니다.

글쎄, 내가 이것을 쓴 이유입니다!
바로 들어가 보겠습니다.

HTML에서

1 단계:

각 질문과 답변 또는 각 드롭다운 태그와 해당 콘텐츠가 공통 div에 있는지 확인합니다.

2 단계:

각 드롭다운 태그 또는 FAQ 버튼에 **공통 클래스 **를 할당합니다.

3단계:

각 FAQ 답변 또는 드롭다운 콘텐츠에 공통 클래스를 할당합니다.

예시:

<div class="container">
  <div>
    <button class="tag"></button>
    <p class="answer"></p>
  </div>
  <div>
    <button class="tag"></button>
    <p class="answer"></p>
  </div>
  <div>
    <button class="tag"></button>
    <p class="answer"></p>
  </div>
  <div>
    <button class="tag"></button>
    <p class="answer"></p>
  </div>
  <div>
    <button class="tag"></button>
    <p class="answer"></p>
  </div>
</div>

자바스크립트에서

4단계:

주어진 각 클래스를 querySelectorAll()에 할당합니다.

const btn = document.querySelectorAll('.tag');
const answer = document.querySelectorAll('.answer');

이 경우 "btn"은 "태그"클래스가 있는 각 버튼을 나타냅니다.

이제 우리는 for 루프를 가져옵니다.

for (let i = 0; i < btn.length; i++) {

   } )}

여기서 "i"는 현재 배열 인덱스를 보유하는 임시 변수를 나타냅니다. 이 현재 배열은 for 루프 방법을 통해 실행됩니다. 문자 "i"를 반드시 사용해야 하는 것은 아닙니다. 모든 문자는 잘 작동합니다.
그러나 라인을 따라 변경하지 않도록 하십시오.

"btn.length"는 배열의 길이를 나타내며 아래와 같이 "btn NodeList"를 표시합니다.

NodeList(5) [button.tag, button.tag, button.tag, button.tag, button.tag] length: 5

5단계:

"btn"에 이벤트 리스너를 추가하여 "클릭"할 때마다 기능이 수행되도록 합니다.

for (let i = 0; i < btn.length; i++) {
    btn[i].addEventListener('click', ()=>{
   } )}

이것이 작동하는지 확인하려면 console.log로 테스트하십시오.

for (let i = 0; i < btn.length; i++) {
  console.log(btn);
    btn[i].addEventListener('click', ()=>{
   } )}

6단계:

토글 클래스 추가

토글 클래스는 클래스 추가에서 배치된 이벤트에 따라 클래스 제거로 이동합니다.

for (let i = 0; i < button.length; i++) {
  console.log(button);
    button[i].addEventListener('click', ()=>{
        console.log('n');
        button[i].classList.toggle('display')
        answer[i].classList.toggle('show')

   } )}

토글 클래스를 사용하려면 CSS 파일에 스타일을 포함해야 합니다.
아래 스타일처럼

.display{
    transform: rotate(180deg);

}
.show{
    display: block;
}

따라서 버튼이나 태그를 클릭할 때마다 스타일과 기능이 작동합니다.

도움이 되었기를 바랍니다. 코드를 구현하는 방법과 의견에 열려 있습니다.

프런트 엔드 멘토를 보려면 여기를 클릭하십시오challenge.