Toggle class with JS - 只改变实际位置

Question

我的代码有问题...我想在按下按钮时显示特定的 FA 图标，而在再次按下时显示不同的图标。（附上图片）：

但是当我按下按钮时，所有按钮都发生了变化......我认为问题出在for中，但我不知道如何解决它。

   <script>
          function MostrarObra(){
            var Icon = document.getElementsByTagName('i');
            
              for (i = 0; i < Icon.length; i++) {
                Icon[i].classList.toggle('fa-angle-double-down');
                Icon[i].classList.toggle('fa-angle-double-up');
              }
            };
</script>


  <div class="card-header p-0" id="headingTwo">
      <button onclick="MostrarObra()" class="button w-100 text-left" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
          <span class="h5 font-weight-bold"> <i class="fas fa-angle-double-down mr-2"></i> Obra PACE Sarmiento</span>
      </button>
  </div>

Answer 1

当您调用 document.getElementsByTagName('i') 时，您将获得文档中的所有元素 i。这就是为什么所有按钮都会改变的原因。

您可以将触发事件的按钮传递给您的函数，然后开始从中查找 i 元素。

    <script>
    function MostrarObra(element) {
        const icon = element.querySelector('i');
        icon.classList.toggle('fa-angle-double-down');
        icon.classList.toggle('fa-angle-double-up');
    }
    </script>

    [...]

    <button onclick="MostrarObra(this)">[...]</button>

Toggle class with JS - 只改变实际位置

Toggle class with JS - Only change the actual position

html

javascript

position