由于上课活跃，如何更改图像？

问题描述

我有三只手风琴，它是切换活动类，只显示一只手风琴。我想根据打开（活动）手风琴更改我的侧面图像。例如;如果1.accordion active显示photo1.jpeg，依此类推。我找不到实现此目的的方法。我想，会有这样的逻辑；如果第一个手风琴classList包含活动类，则显示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,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,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

解决方法

使用代码，这是一种为每个活动标签应用不同图像的方法。

我在您的图片标签中添加了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,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,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>