如何選擇具有相同類名 JavaScript 的多個元素

Question

我想要做的只是通過給它一個活動類來顯示一些文本點擊JavaScript。你可以看到有兩個按鈕具有相同的父類以及只有子類的內容不同。 但只有第一個按鈕在工作，因為我正在傳遞 [0] 的數組值。有沒有辦法完成所有按鈕？ 謝謝你..

 let arrowbtn = document.getElementsByClassName("story-contents-title")[0]; let info = document.getElementsByClassName("story-contents-discription")[0]; arrowbtn.addEventListener("click", () => { info.classList.toggle("active"); arrowbtn.classList.toggle("active"); });

 .story-title { color: #377dff; } .story-contents { margin-top: 1rem; } .story-contents-title { background-color: white; color: white; border: solid 2px #377dff; padding: 0.5rem; font-size: 4rem; border-radius: 10px; width: 20rem; color: #377dff; } .story-contents-title svg { stroke: #377dff; transition: all 0.5s ease-out; } .story-contents-title.active svg { transform: rotate(90deg); } .story-contents-discription { margin-top: 0.5rem; padding: 1rem; color: white; background-color: #377dff; border-radius: 10px; display: none; } .story-contents-discription.active { display: block; }

 <div class="story"> <h1 class="story-title">Our Story</h1> <div class="story-contents"> <button class="story-contents-title">2021<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-big-right" width="34" height="34" viewBox="0 0 24 24" stroke-width="1.5" stroke="" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M4 9h8v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z" /> </svg></button> <p class="story-contents-discription">Wins 'Outstanding Crisis Finance Innovation 2021 (Asia Pacific) Award' by Global Finance Magazine <br> Launches Step Up Credit Card <br> Wins 'Digital Lending Award' at the Fintech India Innovation Awards <br> Wins “Excellence in Consumer Lending” at India Digital Awards</p> </div> <div class="story-contents"> <button class="story-contents-title">2020<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-big-right" width="34" height="34" viewBox="0 0 24 24" stroke-width="1.5" stroke="" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M4 9h8v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z" /> </svg></button> <p class="story-contents-discription"> Upgrades in-house systems to enable work-from-home for employees <br> Launches Free Credit Report in Regional Languages </p> </div> </div>

Answer 1

我會在容器內委托和導航

 document.querySelector(".story").addEventListener("click", function(e) { // any click in the story div const tgt = e.target.closest("button"); // we click inside a button somewhere, closest makes sure it is the button itself we are getting tgt.closest(".story-contents") // the div holding button AND paragraph .querySelector(".story-contents-discription") // the paragraph .classList.toggle("active"); // toggle active on paragraph tgt.classList.toggle("active"); // toggle active on button });

 .story-title { color: #377dff; } .story-contents { margin-top: 1rem; } .story-contents-title { background-color: white; color: white; border: solid 2px #377dff; padding: 0.5rem; font-size: 4rem; border-radius: 10px; width: 20rem; color: #377dff; } .story-contents-title svg { stroke: #377dff; transition: all 0.5s ease-out; } .story-contents-title.active svg { transform: rotate(90deg); } .story-contents-discription { margin-top: 0.5rem; padding: 1rem; color: white; background-color: #377dff; border-radius: 10px; display: none; } .story-contents-discription.active { display: block; }

 <div class="story"> <h1 class="story-title">Our Story</h1> <div class="story-contents"> <button class="story-contents-title">2021<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-big-right" width="34" height="34" viewBox="0 0 24 24" stroke-width="1.5" stroke="" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M4 9h8v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z" /> </svg></button> <p class="story-contents-discription">Wins 'Outstanding Crisis Finance Innovation 2021 (Asia Pacific) Award' by Global Finance Magazine <br> Launches Step Up Credit Card <br> Wins 'Digital Lending Award' at the Fintech India Innovation Awards <br> Wins “Excellence in Consumer Lending” at India Digital Awards</p> </div> <div class="story-contents"> <button class="story-contents-title">2020<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-big-right" width="34" height="34" viewBox="0 0 24 24" stroke-width="1.5" stroke="" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M4 9h8v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z" /> </svg></button> <p class="story-contents-discription"> Upgrades in-house systems to enable work-from-home for employees <br> Launches Free Credit Report in Regional Languages </p> </div> </div>