Как по клику присвоить класс элементу в коллекции, а с другого удалить при условии, если кликнули не на него?

Question

[Mks163]

Имеется блок

<div class="images">
    <img class="mini_img" src="img/1.jpg" alt="">
    <img class="mini_img" src="img/2.jpg" alt="">
    <img class="mini_img" src="img/3.jpg" alt="">
    <img class="mini_img" src="img/4.jpg" alt="">
 </div>

Ребята, всем привет! :) Необходимо по клику на изображение присвоить ему класс, так же сделать проверку, если такой класс уже есть во всей коллекции и мы кликнули не по тому элементу, на котором он есть, то его нужно удалить и повесить на тот элемент по которому кликнули, как это реализовать? Именно на ванильном JS'e, без jQ.

Comments

[Алексей Скляров]

Допустим, у вас все картинки с классом .img, и на одной из картинок класс .img--active, при клике по .img, вам нужно со всех .img удалить .img--active, а затем на текущий повесить .img--active. То есть вся суть удаления заключается в удалении сразу всех картинок сразу, без разбора, есть там этот класс или нет, он все равно на какой-то из них удалится.

[Mks163]

Алексей Скляров,

const miniImage = document.getElementsByClassName('mini_image');

for (let i = 0; i < miniImage.length; i++) {
    miniImage[i].onclick = function () {
        if(miniImage[i].classList.contains('active')) {
            miniImage[i].classList.remove('active');
        }
        miniImage[i].classList.add('active');
    }
    
}

Я рассуждал так же, но почему то не работает, сильно не ругайте, я только учусь :D

[Aleksey Solovyev]

Mks163,

const miniImages = document.querySelectorAll('.mini_img');

document.querySelector('.images').onclick = function(event) { // event handler for wrapper
  if( event.target.classList.contains('mini_img') ) { // check if user click image element
    miniImages.forEach( el => el.classList.remove('active')); // remove from all images class "active"
    event.target.classList.add('active'); // add class "active" to clicked image
  }
}

не проверял, должно работать.

ps Вы хоть классы пишите внимательно - getElementsByClassName('mini_image'); <-> class="mini_img"

[0ffff0]

Mks163,
Метод remove принимает 2 аргумента, вы должны указать что заменить на что,
например 'passive' на 'active', а не как у вас:

miniImage[i].classList.remove('active');

но это синтаксис,
а вот логическая ошибка:

miniImage[i].classList.add('active');

Полагаю вы хотели назначить 'active' элементу по которому кликнули, тогда пишете
this.classList.add('active');

[Mks163]

Aleksey Solovyev, Спасибо большое), всё работает, не могу отметить решением, т.к. ответ в комментариях. ps с классами опечатался, извиняюсь.

Answer 1

[Дмитрий]

function onClick(event) {
    [event.target, document.querySelector('.' + className)].forEach(el => {
        if(el) el.classList.toggle(className);});
}