使用 javascript 显示和隐藏元素和切换图标

Question

当我点击图标时，我想切换 class 段落不可见和 h4 粗体。我怎样才能遍历这个？当我尝试时，我只得到第一段。也无法在点击时更改图标。

我的代码：

const btns = document.querySelectorAll('i');

btns.forEach((btn) => {
    btn.addEventListener('click', (e) => {

        const paragraph = document.querySelector('p');
        const h4 = document.querySelector('h4')

        h4.classList.toggle('bold');
        paragraph.classList.toggle('invisible');

        if (btn.classList.contains('hidden')) {
       btn.classList.remove('hidden');
        btn.classList.add('visible');
    }
    else if (btn.classList.contains('visible')) {
        btn.classList.remove('hidden');
        btn.classList.add('visible');
    }
    })
})

    .bold {
      font-weight: 700;
    }

    .invisible {
      display: none;
    }
    i.hidden {
    visibility: hidden;

}
    i.visible {
    visibility: visible;
}

    <div class="question">
      <h4>question<i class="fas fa-chevron-down"></i></h4>
      <p>answear</p>
    </div class="question">
    <div class="question">
      <h4>question<i class="fas fa-chevron-down"></i></h4>
      <p>answear</p>
    </div class="question">
    <div class="question">
      <h4>question<i class="fas fa-chevron-down"></i></h4>
      <p>answear</p>
    </div>

Answer 1

您可以使用 Event.target class question 定位最近的元素，您可以从中找到相应的元素：

const btns = document.querySelectorAll('i');

btns.forEach((btn) => {
  btn.addEventListener('click', (e) => {

    const paragraph = e.target.closest('.question').querySelector('p');
    const h4 = e.target.closest('.question').querySelector('h4')

    h4.classList.toggle('bold');
    paragraph.classList.toggle('invisible');
    
    //if you want the icon to be toggled
    e.target.classList.toggle('fa-chevron-up');
    e.target.classList.toggle('fa-chevron-down');
  })
})

.bold {
  font-weight: 700;
}

.invisible {
  display: none;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<div class="question">
  <h4>question<i class="fas fa-chevron-down"></i></h4>
  <p>answear</p>
</div class="question">
<div class="question">
  <h4>question<i class="fas fa-chevron-down"></i></h4>
  <p>answear</p>
</div class="question">
<div class="question">
  <h4>question<i class="fas fa-chevron-down"></i></h4>
  <p>answear</p>
</div>

Answer 2

我建议您只在父问题上切换 class 并使用基于该父问题的 class 特定规则 class

const btns = document.querySelectorAll('.question i');

btns.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    const answer = e.target.closest('.question')
    answer.classList.toggle('collapsed');
  });
});

.question.collapsed h4 {
  font-weight: 700;
  color:red
}

.question.collapsed p {
  display: none;
}

<div class="question">
  <h4>question<i class="fas fa-chevron-down">Icon</i></h4>
  <p>answear</p>
</div>
<div class="question">
  <h4>question<i class="fas fa-chevron-down">Icon</i></h4>
  <p>answear</p>
</div>
<div class="question">
  <h4>question<i class="fas fa-chevron-down">Icon</i></h4>
  <p>answear</p>
</div>

使用 javascript 显示和隐藏元素和切换图标

Show and hide element and toggle icon with javascript

javascript

foreach

toggle