Как одновременно по клику убрать/добавить класс элементам нескольких списков?

Question

[Breeze1]

Есть два списка, по клику на элемент добавляем ему класс active, а с предыдущего убираем.

Нужно, чтобы когда я кликал например на третий элемент первого списка, класс active добавлялся к третьему элементу и первого и второго списка. И наоборот.

https://codepen.io/brezze/pen/yLBPKbG

Answer 1

[0xD34F]

Где элементы находятся, что за элементы, какой класс будем добавлять/удалять:

const containerSelector = 'ul';
const itemSelector = 'li';
const activeClass = 'active';

Хотели на jquery? - ну типа вот:

const $containers = $(containerSelector).on('click', itemSelector, function(e) {
  const index = $(itemSelector, e.delegateTarget).index(this);
  $containers.find(`${itemSelector}.${activeClass}`).removeClass(activeClass);
  $containers.find(`${itemSelector}:eq(${index})`).addClass(activeClass);
});

Или, к чёрту jquery:

const containers = document.querySelectorAll(containerSelector);
containers.forEach(n => n.addEventListener('click', onClick));

function onClick(e) {
  const item = e.target.closest(itemSelector);
  if (item) {
    const items = this.querySelectorAll(itemSelector);
    const index = Array.prototype.indexOf.call(items, item);
    containers.forEach(container => {
      container.querySelectorAll(itemSelector).forEach((n, i) => {
        n.classList.toggle(activeClass, i === index);
      })
    });
  }
}