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

    0xD34F
    @0xD34F Куратор тега JavaScript
    Где элементы находятся, что за элементы, какой класс будем добавлять/удалять:

    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);
          })
        });
      }
    }
    Ответ написан
    Комментировать