0

Есть много слайдеров как ниже

<div class="slider">
    <div class="slider-1">...</div>
    <div class="slider-2 slider--active">...</div>
    <div class="slider-3">...</div>
    <div class="slider-4">...</div>
    <div class="slider-5">...</div>
<div>

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

<div class="slider__menu">
    <div class="slider__menu-item">slider-1</div>
    <div class="slider__menu-item slider__menu-active">slider-2</div>
    <div class="slider__menu-item">slider-3</div>
    <div class="slider__menu-item">slider-4</div>
</div>

Ну или если есть идеи как реализовать меню переключения слайдеров, буду очень рад. Заранее спасибо! P/s Прикрепляю картинку верстки для визуализации.введите сюда описание изображения

0

1 ответ 1

0

Если я правильно понял:

const slider = document.querySelector('.slider__menu'); // Выбираем родителя

slider.addEventListener('click', (evt) => { // Добавляем родителю событие клика
  const currentItem = evt.target; // Выбираем элемент, по которому кликнули
  const isTwoClasses = currentItem.classList.length === 2; // Условие на количество классов равное двум

  if (isTwoClasses) {
     currentItem.classList.add('slider__menu-active'); // Добавляем класс, если условие истинно
  }
});

<div class="slider__menu">
  <div class="slider__menu-item">slider-1</div>
  <div class="slider__menu-item second-class">slider-2</div>
  <div class="slider__menu-item">slider-3</div>
  <div class="slider__menu-item">slider-4</div>
</div>
1
  • Благодарю за помощь. И я уверен что данное решение идеально подойдет для присвоения второго (в данном случае третьего) класса. Мне хотелось включить див слайдера при клике на элементе див слайдер меню, так что это решение не совсем подойдёт мне. Если я правильно понял написанный код (у меня плохое знание js )
    – Aesthetics
    9 дек 2019 в 13:05

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.