Question

我的一个设计中有一个手风琴引导程序组件。我已经添加了很棒的字体，当手风琴展开时，我想在该carot上添加一类“ rotate”，使其指向上。然后，当手风琴倒塌时，我希望颈椎再次指向下方。该代码适用于第一个向下的心，但不适用于其余的。如何做到这一点，使该类适用于用户单击的任何一个？

这是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来处理它，以确定确切地是哪个元素首先触发了该事件。这称为"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>

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

1 个答案: