Как переключать активный класс у итема?

Question

[intriga93]

картинки меняются, а активный класс у теста - нет
https://jsfiddle.net/jgk0brwu/7/

Answer 1

[0xD34F]

const listTag = 'ul';
const listClass = 'list';
const itemTag = 'li';
const itemClass = 'item';
const activeClass = 'active';

Вариант раз - перебираем все элементы списка, каждому переключаем класс в зависимости от его равенства кликнутому:

const list = document.createElement(listTag);
const items = arr.map(function(n) {
  const item = document.createElement(itemTag);
  item.textContent = n.text;
  item.classList.add(itemClass);
  item.addEventListener('click', this);
  return item;
}, function() {
  list.style.setProperty('background-image', `url(${arr[items.indexOf(this)].url})`);
  items.forEach(n => n.classList.toggle(activeClass, n === this));
});

list.classList.add(listClass);
list.append(...items);
document.body.append(list);

items[0].click();

Вариант два - ищем внутри списка элемент с классом, удаляем у него класс, добавляем класс кликнутому элементу:

document.body.insertAdjacentHTML('beforeend', `
  <${listTag} class="${listClass}">${arr.map(({ url, text }) => `
    <${itemTag} class="${itemClass}" data-url="${url}">${text}</${itemTag}>`).join``}
  </${listTag}>
`);

const list = document.body.lastElementChild;

list.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(`${itemTag}.${itemClass}`)) {
    list.style.backgroundImage = `url(${t.dataset.url})`;
    list.querySelector(`.${activeClass}`)?.classList.remove(activeClass);
    t.classList.add(activeClass);
  }
});

list.children[0].dispatchEvent(new Event('click', { bubbles: true }));