Как сделать что бы только один элемент мог иметь класс active на чистом JS?

Question

[DeniSidorenko]

Добрый день. Написал скрипт что бы при клике на элемент он получал класс active. Есть примерно 20 таким элементов и мне надо что бы при клике на другой , другому добавлялся класс active а этому убиралась. Логика та же что и с input[type=radio].Очень важно что бы код был на чистом JS.

for( var i = 0; i < AllPhotoPreview.length; i++){
AllPhotoPreview[i].onclick = function(){
    if(this.classList){
        this.classList.add('active')
    }
    else{
        this.active += ' ' + active;
    }
}
}

Comments

[Сергей Соколов]

все эти элементы - под одним родителем, или разбросаны?

Answer 1

[DeniSidorenko]

for( var i = 0; i < AllPhotoPreview.length; i++){
  AllPhotoPreview[i].onclick = function(){
    if(this.classList) {
      for (var j = 0; j < AllPhotoPreview.length; j++) {
        AllPhotoPreview[j].classList.remove('active');
      }
      this.classList.add('active');
    } else {
      this.active += ' ' + active;
    }
  }
}

Comments

[gleendo]

DeniSidorenko Вы считаете это хорошим кодом?

[Robert Bl]

Есть такая штука "Делегирование событий"

Answer 2

[gleendo]

Demo

Answer 3

[Robert Bl]

https://codepen.io/Robert_bl/pen/QMmJVg