Блог

Главная - Вопросы по программированию - Как я могу изменить изображение из-за активного класса?

Как я могу изменить изображение из-за активного класса?

#javascript #html #accordion

#javascript #HTML #аккордеон

Вопрос:

У меня есть три аккордеона, которые переключают активный класс, и показывают только один аккордеон. Я хочу изменить свое боковое изображение в соответствии с открытым (активным) аккордеоном. Например; если 1.активное отображение аккордеона photo1.jpeg и так далее. Я не могу найти способ добиться этого. Я думаю, будет логика примерно такая; если первый список классов accordion содержит активный класс show 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>

Ответ №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>