为什么我的“e.target”只适用于第一项？

Question

我的一个设计中有一个手风琴引导组件。我从 font awesome 添加了一个向下的胡萝卜，当手风琴展开时，我想向该胡萝卜添加一个“旋转”类，使其指向上方。然后当手风琴崩溃时，我希望胡萝卜再次指向下方。该代码适用于第一个向下的胡萝卜，但不适用于其余部分。我怎样才能使课程适用于用户点击的任何一个？

这里是 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>

这里是 Javascript：

var carotDown = document.querySelector('.fa-caret-down');

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

Answer 1

如 cmets 中所述，querySelector() 返回它可以找到的第一个匹配项。如果您使用querySelectorAll()，它将返回所有匹配元素的集合，但在这种情况下，您需要遍历集合并一次绑定每个元素。

另一种选择是继续使用querySelector()，但要找到所有要绑定的实际元素的祖先，而不是绑定每个元素，只需将事件绑定到祖先。然后，当单击任何后代时，该事件将冒泡到祖先，您可以在那里使用event.target 来处理它，以确定首先是哪个元素触发了该事件。这称为"Event Delegation"。

// Set the event on an ancestor
document.querySelector('.accordion').addEventListener('click', function(e){
  // Check to see if the event was triggered by an element you care about
  if(e.target.classList.contains("fa-caret-down")){
    e.target.classList.toggle('rotate'); // Work with the element that triggered the event.
  }
});

.rotate { color:red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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>