1

У меня имеется массив images = ['<img src="./images/1.jpg" class="active" alt="img">','<img src="./images/2.jpg" alt="img">','<img src="./images/3.jpg" alt="img">'] я его перебираю images.forEach(item => { pre.insertAdjacentHTML('beforeend', <div class='preview'>${item}</div>); }); и добавляю картинки и добавляю картинки на страницу, вешаю событие на кнопку, хочу удалять класс active с первой картинки и добавлять на другую, как это сделать в данном случае? благодарю вас за подсказки

4
  • А можно немного кода хотя-бы?))
    – Miha
    16 фев 2022 в 14:26
  • Пожалуйста, исправьте вопрос, чтобы он отражал конкретную проблему с достаточным количеством деталей для возможности дать адекватный ответ. 16 фев 2022 в 14:26
  • @ПростаMiha Бот публикует это сообщение в ответ на действие реального пользователя из очереди проверок (или откуда-то оттуда) 16 фев 2022 в 14:30
  • @ПростаMiha честно говоря, это практически все что есть на данный момент, до этого я вставлял картинки прямо в HTML страницу, после создавал переменную и мог спокойно удалять и добавлять классы через classList, сейчас ситуация другая, добавляю картинки через js на страницу и не пойму, как удалять и добавлять класс в таком случае
    – Mr Vi
    16 фев 2022 в 14:33

1 ответ 1

0

Я не уверен что правильно понял вашу проблему, но вот что у меня получилочь. Надеюсь помог вам

const images = [
'<img src="https://i.pinimg.com/originals/60/05/7a/60057a3552e49b488dc1fc03be3bb4f1.gif" class="active" alt="img">',
'<img src="https://www.icegif.com/wp-content/uploads/demon-slayer-icegif-16.gif" alt="img">',
'<img src="http://31.media.tumblr.com/tumblr_mdmeux7p191r4ugi5o1_250.gif" alt="img">'
];
const test = document.getElementById("test");
const imagesSelect = test.getElementsByTagName("img");
images.forEach(item => { test.innerHTML += `<div class="preview" onclick="active(this)">${item}</div>`});
function active(elem){
  for(let i = 0; i < images.length; i++){
    imagesSelect[i].classList.remove("active");
  }
  elem.children[0].classList.add("active");
}
div{
  width: 100%; 
  display: flex;
  justify-content: space-between;
}

.active{
  border: 4px solid red;
}
<div id="test">

</div>

2
  • Да, спасибо вам огромное, очень помогли!)
    – Mr Vi
    16 фев 2022 в 15:00
  • Можно галочку на вопросик поставить?)))
    – Miha
    16 фев 2022 в 15:06

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.