Javascript 为什么我的；e、 “目标”；只处理第一项？

我有一个手风琴引导组件在我的设计之一。我已经从font Aweasome中添加了一个向下的卡诺，当手风琴展开时，我想向该卡诺添加一个“旋转”类，使其指向上方。然后，当手风琴倒塌时，我希望卡罗再次指向下方。该代码对第一个向下的carot有效，但对其余的carot无效。我怎样才能使该类应用于用户单击的任何一个

这是HTML

        <div class="accordion my-5" id="accordionExample">
          <div class="card" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <div class="card-header d-flex" id="headingOne">
              <h2 class="mb-0">
                <button class="btn" type="button">
                  question 1
                </button>
              </h2>
              <i class="fas fa-caret-down" style="margin-left:auto; padding:12px 10px 0 0;"></i>
            </div>
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
              <div class="card-body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id tellus urna. 
              </div>
            </div>
          </div>
          <div class="card" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            <div class="card-header d-flex" id="headingTwo">
              <h2 class="mb-0">
                <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  question 2
                </button>
              </h2>
              <i class="fas fa-caret-down" style="margin-left:auto; padding:12px 10px 0 0;"></i>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
              <div class="card-body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id tellus urna.
              </div>
            </div>
          </div>
          <div class="card" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            <div class="card-header d-flex" id="headingThree">
              <h2 class="mb-0">
                <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  question 3
                </button>
              </h2>
              <i class="fas fa-caret-down" style="margin-left:auto; padding:12px 10px 0 0;"></i>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
              <div class="card-body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id tellus urna.
              </div>
            </div>
          </div>
          <div class="card" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            <div class="card-header d-flex" id="headingFour">
              <h2 class="mb-0">
                <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  question 4
                </button>
              </h2>
              <i class="fas fa-caret-down" style="margin-left:auto; padding:12px 10px 0 0;"></i>
            </div>
            <div id="collapseFour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
              <div class="card-body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id tellus urna.
              </div>
            </div>
          </div>
        </div>

---

如注释中所述，

querySelector（）

返回它能找到的第一个匹配项。如果您使用

querySelectorAll（）

，它将返回所有匹配元素的集合，但在这种情况下，您需要在集合上循环并一次绑定每个元素

另一个选项是继续使用

querySelector（）

，但要找到要绑定的所有实际元素的祖先，而不是绑定每个元素，只需将事件绑定到祖先。然后，当单击任何子体时，事件将冒泡到祖先，您可以使用

event.target

在那里处理它，以确定到底是哪个元素首先触发了事件。这就是所谓的

//在祖先上设置事件
document.querySelector（'.accordion'）。addEventListener（'click'，函数（e）{
//检查事件是否由您关心的元素触发
if（例如target.classList.contains（“fa插入符号向下”））{
e、 target.classList.toggle（'rotate'）；//使用触发事件的元素。
}
});
.rotate{color:red；}

问题1
**
Lorem ipsum dolor sit amet，是一位杰出的献身者。我要告诉你乌尔纳。
问题2
**
Lorem ipsum dolor sit amet，是一位杰出的献身者。我要告诉你乌尔纳。
问题3
**
Lorem ipsum dolor sit amet，是一位杰出的献身者。我要告诉你乌尔纳。
问题4
**
Lorem ipsum dolor sit amet，是一位杰出的献身者。我要告诉你乌尔纳。
“Document方法返回文档中与指定选择器匹配的第一个元素。”您正在查找。我将其更新为querySelectorAll，但现在它们都不起作用。您是否查看了querySelectorAll页面上的示例？你需要在结果上使用
forEach
，将处理程序应用于单个项目。你比我强！我正要对此发表评论。让我很快试试。我相信这就是问题所在。
var carotDown = document.querySelector('.fa-caret-down');

carotDown.addEventListener('click', function(e){
  e.target.classList.toggle('rotate');
});