Onclick 使用 Javascript 將圖標旋轉 180 度

Question

我需要 select 所有三個圖標，並且當用戶點擊它們時能夠讓它們旋轉 180。 使用當前編寫的代碼，它只針對第一個箭頭圖標，允許它轉動 180 度並返回。 然而，當我單擊其他兩個圖標時，它們不會旋轉/即使我沒有單擊第一個圖標，第一個圖標也會旋轉。

 const arrowFlip = () => { let div = document.getElementById("nav__links"); let icon = document.getElementById("icon"); let open = false; div.addEventListener("click", function() { if (open) { icon.className = "menu-arrow-down"; } else { icon.className = "menu-arrow-down open"; } open =;open; }); }; arrowFlip();

 .menu-arrow-down { transform: rotate(0deg); transition: 1s linear; }.menu-arrow-down.open { transform: rotate(180deg); transition: 1s linear; }

 <ul id="nav__links" class="nav__links"> <div class="desktop__nav"> <li class="parent"> <a href="#">Product</a> <img id="icon" class="menu-arrow menu-arrow-down" src="./images/icon-arrow-light.svg" alt="arrow" /> <ul class="sub-menu"> <li>Overview</li> <li>Pricing</li> <li>Marketplace</li> <li>Features</li> <li>Integrations</li> </ul> </li> <li class="parent"> <a href="#">Company</a> <img id="icon" class="menu-arrow menu-arrow-down" src="./images/icon-arrow-light.svg" alt="arrow" /> <ul class="sub-menu"> <li>About</li> <li>Team</li> <li>Blog</li> <li>Careers</li> </ul> </li> <li class="parent"> <a href="#">Connect</a> <img id="icon" class="menu-arrow menu-arrow-down" src="./images/icon-arrow-light.svg" alt="arrow" /> <ul class="sub-menu"> <li>Contact</li> <li>Newsletter</li> <li>LinkedIn</li> </ul> </li> </div>

Answer 1

ID 必須是唯一的。

委托點擊 - 它更簡單

 document.getElementById("nav__links").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains('menu-arrow-down')) { // make sure we only target elements with this class tgt.classList.toggle('open'); // here you can test tgt.classList.contains('open') to see the state } });

 .menu-arrow-down { transform: rotate(0deg); transition: 1s linear; }.menu-arrow-down.open { transform: rotate(180deg); transition: 1s linear; }

 <ul id="nav__links" class="nav__links"> <div class="desktop__nav"> <li class="parent"> <a href="#">Product</a> <img class="menu-arrow menu-arrow-down" src="./images/icon-arrow-light.svg" alt="arrow" /> <ul class="sub-menu"> <li>Overview</li> <li>Pricing</li> <li>Marketplace</li> <li>Features</li> <li>Integrations</li> </ul> </li> <li class="parent"> <a href="#">Company</a> <img class="menu-arrow menu-arrow-down" src="./images/icon-arrow-light.svg" alt="arrow" /> <ul class="sub-menu"> <li>About</li> <li>Team</li> <li>Blog</li> <li>Careers</li> </ul> </li> <li class="parent"> <a href="#">Connect</a> <img class="menu-arrow menu-arrow-down" src="./images/icon-arrow-light.svg" alt="arrow" /> <ul class="sub-menu"> <li>Contact</li> <li>Newsletter</li> <li>LinkedIn</li> </ul> </li> </div>

Answer 2

您可以將事件偵聽器添加到所有箭頭，這樣您就不需要 id：

 let allArrows = document.querySelectorAll(".menu-arrow"); allArrows.forEach(arrow => { arrow.addEventListener('click', function() { this.className = this.className === "menu-arrow-down open"? "menu-arrow-down": "menu-arrow-down open"; }); });

 .menu-arrow-down { transform: rotate(0deg); transition: 1s linear; }.menu-arrow-down.open { transform: rotate(180deg); transition: 1s linear; }

 <ul id="nav__links" class="nav__links"> <div class="desktop__nav"> <li class="parent"> <a href="#">Product</a> <img id="icon" class="menu-arrow menu-arrow-down" src="https://placekitten.com/50/50" alt="arrow" /> <ul class="sub-menu"> <li>Overview</li> <li>Pricing</li> <li>Marketplace</li> <li>Features</li> <li>Integrations</li> </ul> </li> <li class="parent"> <a href="#">Company</a> <img id="icon" class="menu-arrow menu-arrow-down" src="https://placekitten.com/50/50" alt="arrow" /> <ul class="sub-menu"> <li>About</li> <li>Team</li> <li>Blog</li> <li>Careers</li> </ul> </li> <li class="parent"> <a href="#">Connect</a> <img id="icon" class="menu-arrow menu-arrow-down" src="https://placekitten.com/50/50" alt="arrow" /> <ul class="sub-menu"> <li>Contact</li> <li>Newsletter</li> <li>LinkedIn</li> </ul> </li> </div>

Answer 3

就像其他人寫道：一個 id 必須是唯一的。 此外，您不需要它，因為您只需使用事件的目標並切換其 class .open如果它具有 class menu-arrow 。

 document.getElementById("nav__links").addEventListener("click", function(event) { if (event.target.className.includes('menu-arrow')) { event.target.classList.toggle('open'); } });

 .menu-arrow-down { transform: rotate(0deg); transition: 1s linear; }.menu-arrow-down.open { transform: rotate(180deg); transition: 1s linear; }

 <ul id="nav__links" class="nav__links"> <div class="desktop__nav"> <li class="parent"> <a href="#">Product</a> <img class="menu-arrow menu-arrow-down" src="https://via.placeholder.com/160x120" alt="arrow" /> <ul class="sub-menu"> <li>Overview</li> <li>Pricing</li> <li>Marketplace</li> <li>Features</li> <li>Integrations</li> </ul> </li> <li class="parent"> <a href="#">Company</a> <img class="menu-arrow menu-arrow-down" src="https://via.placeholder.com/160x120" alt="arrow" /> <ul class="sub-menu"> <li>About</li> <li>Team</li> <li>Blog</li> <li>Careers</li> </ul> </li> <li class="parent"> <a href="#">Connect</a> <img class="menu-arrow menu-arrow-down" src="https://via.placeholder.com/160x120" alt="arrow" /> <ul class="sub-menu"> <li>Contact</li> <li>Newsletter</li> <li>LinkedIn</li> </ul> </li> </div>

Answer 4

這是因為id屬性是唯一的，不能與多個元素一起使用。 getElementById將返回第一個id為icon的元素，產生您所看到的結果。 要解決此問題，我建議將參數傳遞給您的 function，無論是event還是數字。 在此示例中，我將使用一個數字：

 let open = false; const arrowFlip = (number) => { let icon = document.getElementsByClassName("icon")[number]; if (open) { icon.className = "icon menu-arrow-down"; } else { icon.className = "icon menu-arrow-down open"; } open =;open; };

 .menu-arrow-down { transform: rotate(0deg); transition: 1s linear; }.menu-arrow-down.open { transform: rotate(180deg); transition: 1s linear; }

 <ul id="nav__links" class="nav__links"> <div class="desktop__nav"> <li class="parent"> <a href="#">Product</a> <img class="icon" onclick="arrowFlip(0)" class="menu-arrow menu-arrow-down" src="./images/icon-arrow-light.svg" alt="arrow" /> <ul class="sub-menu"> <li>Overview</li> <li>Pricing</li> <li>Marketplace</li> <li>Features</li> <li>Integrations</li> </ul> </li> <li class="parent"> <a href="#">Company</a> <img class="icon" onclick="arrowFlip(1)"class="menu-arrow menu-arrow-down" src="./images/icon-arrow-light.svg" alt="arrow" /> <ul class="sub-menu"> <li>About</li> <li>Team</li> <li>Blog</li> <li>Careers</li> </ul> </li> <li class="parent"> <a href="#">Connect</a> <img class="icon" onclick="arrowFlip(2)"class="menu-arrow menu-arrow-down" src="./images/icon-arrow-light.svg" alt="arrow" /> <ul class="sub-menu"> <li>Contact</li> <li>Newsletter</li> <li>LinkedIn</li> </ul> </li> </div>

每個圖像上的onclick()都會觸發這個 function，發送一個數字參數，允許引用正確的箭頭。 然后，當它翻轉時，代碼將知道用戶正在引用什么圖像。