Как при клике на li передать его добавочный класс родительскому диву?

Question

[Dimtri]

Есть такая разметка

<div class="selectboxss">
  <div class="selectboxssvalue">
    <div class="selectboxssvalue-inner">
      Верхняя строчка
    </div>
  </div>
  <div class="selectboxssmenu-wrap" style="display: none;">
    <ul class="selectboxssmenu">
      <li class="selectoption act selectoption-1">
        1 пункт
      </li>
      <li class="selectoption  selectoption-2">
       2 пункт
      </li>
      <li class="selectoption  selectoption-3">
        3 пункт
      </li>
    </ul>
  </div>
</div>

Как при клике на li.selectoption взять его добавочный класс selectoption-1 или selectoption-2 или сколько угодно, в зависимости от кол-ва , и передать обертке с классом selectboxss? И, соответственно, удалять и добавлять классы у родителя при клике на другие .

PS. Скрипт, который допиливаю, написан на Jquery. Просто тега такого не нашлось.

Comments

[Сергей delphinpro]

Слушатель кликов вешается с помощью addEventListener
кликнутый объект можно достать и событие ивента
Получить доступ к классам - через classList

В чем у вас затруднение?

[Dimtri]

Артур Петрин, да, то, что надо, спасибо)

[Dimtri]

Артур Петрин, могу отметить решением, если напишешь в ответах, а не в комментариях. Правда, как выяснилось, я не совсем точно поставил задачу. Почему-то скрипт не работает, когда внутри тега li есть html, а не просто текст. Но это уже мой косяк))

Answer 1

[0xD34F]

О каких элементах идёт речь, как получать из них классы, и как переключать классы у их предка:

const containerSelector = '.selectboxss';
const itemClass = 'selectoption';
const itemSelector = `${containerSelector} .${itemClass}`;

const getClasses = el => Array.prototype.filter.call(el.classList, n => n !== itemClass);
//const getClass = el => el.className.match(RegExp(`${itemClass}-\\d+`))[0];

function updateClasses(item) {
  const container = item.closest(containerSelector);
  const { classList: cl } = container;
  cl.remove(...Array.prototype.flatMap.call(container.querySelectorAll(itemSelector), getClasses));
  cl.add(...getClasses(item));
  //cl.remove(...Array.from(container.querySelectorAll(itemSelector), getClass));
  //cl.add(getClass(li));
}

Назначаем обработчик клика каждому элементу индивидуально:

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => updateClasses(e.currentTarget));

Или, можем применить делегирование:

document.addEventListener('click', e => {
  const item = e.target.closest(itemSelector);
  if (item) {
    updateClasses(item);
  }
});

Comments

[Dimtri]

Спасибо, помогли)

[Dimtri]

Только один момент выяснился. Я не указал в задаче, т.к. не придал этому значение - внутри тега li будет другая html-разметка. И вот с этой-то разметкой скрипт уже не работает. Не подскажете, как можно его подправить?
Сейчас работает, только если текст. А там предполагается прям нагородить верстки))

[0xD34F]

Я не понимаю, что вы говорите. Вот тут:

))

Разверните мысль.

[Dimtri]

0xD34F, это лирическое отступление. Та часть, что по делу, кончается вот тут:

Не подскажете, как можно его подправить?

[0xD34F]

Предлагаю вам зарубить себе на носу, что ваши "лирические отступления" на хрен тут никому не нужны. Никогда больше не публикуйте здесь подобную гнусь. Не тратьте впустую чужое время.

Ответ обновил.

Answer 2

[gogowq]

const selectboxss = document.querySelector('.selectboxss');
const liElements = document.querySelectorAll('.selectboxssmenu li');
liElements.forEach(li => {
  li.addEventListener('click', () => {
    const additionalClass = li.classList[1];
    selectboxss.classList.remove(...selectboxss.classList);
    selectboxss.classList.add(additionalClass);
  });
});