У меня имеется массив 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 с первой картинки и добавлять на другую, как это сделать в данном случае?
благодарю вас за подсказки
-
А можно немного кода хотя-бы?))– Miha16 фев 2022 в 14:26
-
Пожалуйста, исправьте вопрос, чтобы он отражал конкретную проблему с достаточным количеством деталей для возможности дать адекватный ответ.– Дух сообщества Бот16 фев 2022 в 14:26
-
@ПростаMiha Бот публикует это сообщение в ответ на действие реального пользователя из очереди проверок (или откуда-то оттуда)– Алексей Шиманский16 фев 2022 в 14:30
-
@ПростаMiha честно говоря, это практически все что есть на данный момент, до этого я вставлял картинки прямо в HTML страницу, после создавал переменную и мог спокойно удалять и добавлять классы через classList, сейчас ситуация другая, добавляю картинки через js на страницу и не пойму, как удалять и добавлять класс в таком случае– Mr Vi16 фев 2022 в 14:33
Добавить комментарий
|
1 ответ
Я не уверен что правильно понял вашу проблему, но вот что у меня получилочь. Надеюсь помог вам
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>