当元素包含某个 class 时尝试使用 JS 旋转图像

Question

基本上我试图做到这一点，以便当我点击一个问题时，我在问题旁边的箭头会旋转 180 度。 现在我的代码根本不旋转箭头。 任何帮助，将不胜感激。

这是我的 javascript 代码

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function () {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

var img = document.getElementsByClassName("arrow");

if (button.classList.contains(active)) {
  img.style.transform = "rotate(180deg)";
}
    

当前结果

Answer 1

这不起作用的一个重要原因是这条线：

if (button.classList.contains(active)) { img.style.transform = "rotate(180deg)"; }

不在某些触发箭头旋转的 function 内部。 它在页面加载时进行评估，然后不再使用。 但是，有几种方法可以改进您的代码。

使用类来影响您的样式更改可以让您获得更好的可读性、灵活性和可重用性。 我还选择了querySelectorAll而不是getElementsByClassname并使用了closest / querySelector组合来查找相邻元素而不是 nextElementSibling

 document.querySelectorAll(".accordian").forEach(acc => { acc.addEventListener("click", e => { e.target.classList.toggle("active"); e.target.closest('.container').querySelector('.arrow').classList.toggle('active') e.target.closest('.container').querySelector('.content').classList.toggle('show') }); });

 .arrow { transition: all.5s; display: inline-block; }.arrow.active { transform: rotate(90deg); }.content { display: none; }.show { display: block; }

 <div class='container'> <a class='accordian' href='#'>click me</a> <span class='arrow'>></span> <div class='content'>Show//Hide content</div> </div> <div class='container'> <a class='accordian' href='#'>click me</a> <span class='arrow'>></span> <div class='content'>Show//Hide content</div> </div>