Как при клике на 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 classContainer = 'selectboxss';
const classOption = 'selectoption';
const getClasses = el => [...el.classList].filter(n => n !== classOption);
//const getClass = el => el.className.match(RegExp(`${classOption}-\\d+`))[0];

document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains(classOption)) {
    const container = t.closest(`.${classContainer}`);
    const { classList } = container;
    classList.remove(...[...container.querySelectorAll(`.${classOption}`)].flatMap(getClasses));
    classList.add(...getClasses(t));
    //classList.remove(...Array.from(container.querySelectorAll(`.${classOption}`), getClass));
    //classList.add(getClass(t));
  }
});

Comments

[Dimtri]

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

[Dimtri]

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

[0xD34F]

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

))

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

[Dimtri]

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

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

[0xD34F]

Dimtri, не подскажу, пока вы не сделаете одно из двух:

1. Представите удовлетворительное объяснение, за каким хреном мне нужно спотыкаться о ваши "лирические отступления".
2. Зарубите себе на носу, что тратить впустую чужое время - неприемлемо.

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);
  });
});