由於活動班級，我如何更改圖像？

Question

我有三個手風琴是切換活動類，並且只顯示一個手風琴。 我想根據打開（活動）手風琴更改我的側面圖像。 例如; 如果 1.accordion active show photo1.jpeg等等。 我找不到實現這一目標的方法。 我猜，會有這樣的邏輯； 如果第一個手風琴類列表包含活動類顯示 photo1.jpeg 等等。 有人可以幫幫我嗎 ？

 var acc = document.getElementsByClassName("accordion"); for (var i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { let active = document.querySelectorAll(".accordion.active"); for (let j = 0; j < active.length; j++) { active[j].classList.remove("active"); active[j].nextElementSibling.style.maxHeight = null; } this.classList.toggle("active"); panel.style.maxHeight = panel.scrollHeight + "px"; } }); }

 .container { display: flex; } .img-container { height: 250px; width: auto; } .img-container img { height: 250px; width: auto; } .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <div class="container"> <div class="img-container"> <img src="https://picsum.photos/200/300" alt="image"> </div> <div class="accordion-container"> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div>

Answer 1

使用您的代碼，這是為每個活動選項卡應用不同圖像的一種方法。

我將 id="image" 添加到您的圖像標簽，並且我正在使用活動索引更改其來源。

我正在使用示例圖像來顯示功能。 - 注釋在代碼中。

 var acc = document.getElementsByClassName("accordion"); //declare image as var for image tag var image = document.getElementById("image"); for (var i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { let active = document.querySelectorAll(".accordion.active"); for (let j = 0; j < active.length; j++) { active[j].classList.remove("active"); active[j].nextElementSibling.style.maxHeight = null; //change image source based on active index if (j === 0) { image.src = "https://cdn.pixabay.com/photo/2020/11/04/19/22/windmill-5713337__340.jpg" } if (j === 1) { image.src = "https://cdn.pixabay.com/photo/2020/11/04/15/29/coffee-beans-5712780__340.jpg" } } this.classList.toggle("active"); panel.style.maxHeight = panel.scrollHeight + "px"; } }); }

 .container { display: flex; } .img-container { height: 250px; width: auto; } .img-container img { height: 250px; width: auto; } .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <div class="container"> <div class="img-container"> <img id="image" src="https://picsum.photos/200/300" alt="image"> </div> <div class="accordion-container"> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div>