[英]Trying to rotate an image with JS when an element contains a certain class
基本上我試圖做到這一點,以便當我點擊一個問題時,我在問題旁邊的箭頭會旋轉 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)";
}
這不起作用的一個重要原因是這條線:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.