Почему мой e.target работает только с первым элементом?

Question

В одном из моих дизайнов есть компонент начальной загрузки для гармошки. Я добавил букву внизу шрифта, и когда аккордеон расширяется, я хочу добавить класс «поворота» к этой букве, чтобы он был направлен вверх. Затем, когда рухнет гармошка, я хочу, чтобы каретка снова указывала вниз. Код работает с первой записной книжкой, но не над остальными. Как я могу сделать так, чтобы класс применялся к тому, на который пользователь нажимает?

Вот 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

Как указано в комментариях, querySelector() возвращает первое найденное совпадение. Если вы используете querySelectorAll(), он вернет коллекцию всех совпадающих элементов, но в этом случае вам придется циклически перебирать коллекцию и связывать каждый элемент по одному.

Другой вариантпродолжать использовать querySelector(), но чтобы найти предка всех фактических элементов, которые вы хотите связать, и вместо того, чтобы связывать каждый из них, просто привяжите событие к предку. Затем, когда щелкнет любой потомок, событие будет передано предку, и вы можете обработать его там, используя event.target, чтобы точно определить, какой элемент вызвал событие в первую очередь. Это называется «Делегирование событий» .

// 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>