[英]Trying to rotate an image with JS when an element contains a certain class
Basically im trying to make it so that when i click on a question the arrow i have next to the question rotates 180 degrees.基本上我试图做到这一点,以便当我点击一个问题时,我在问题旁边的箭头会旋转 180 度。 Right now my code doesnt rotate the arrows at all.
现在我的代码根本不旋转箭头。 Any help would be appreciated.
任何帮助,将不胜感激。
Heres my javascript code这是我的 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)";
}
One big reason this isn't working is that this line:这不起作用的一个重要原因是这条线:
if (button.classList.contains(active)) { img.style.transform = "rotate(180deg)"; if (button.classList.contains(active)) { img.style.transform = "rotate(180deg)"; }
}
isn't inside of some function that triggers the arrow to rotate.不在某些触发箭头旋转的 function 内部。 It is evaluated when the page loads and then not used again.
它在页面加载时进行评估,然后不再使用。 However, there are a few ways to improve your code.
但是,有几种方法可以改进您的代码。
Using classes to affect your style changes allows you better readability, flexibility and reusability.使用类来影响您的样式更改可以让您获得更好的可读性、灵活性和可重用性。 I also opted for
querySelectorAll
instead of getElementsByClassname
and used a closest
/ querySelector
combo to find adjacent elements rather than nextElementSibling我还选择了
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.