1

Есть код сейчас он по очереди через каждых 2с добавляет и удаляет класс active у элементов. Нужно сделать чтоб при клике на какой-то элемент (выше или ниже активного), он стал активным и через две секунды у него удаляется active, а у следующего добавляеться и т.д.

const $div = $('.wrap div');
let index = -1;

setInterval(function() {
  $div.eq(index).removeClass('active');
  index = (index + 1) % $div.length;
  $div.eq(index).addClass('active');
}, 2000);
.wrap .active {
  background: red;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
</div>

1 ответ 1

2

Для начала замечание: вам не нужно хранить индекс текущего активного элемента. Вам нужно по тику таймера сбросить активность у элемента и назначить активным следующий (или первый, если следующего нет).

А по клику вам нужно бросить активность у текущего элемента и назначить активным тот по которому кликнули.

Тогда исходя из этого вам достаточно в таймере найти текущий активный элемент и сэмулировать клик по следующему.

jQuery(function($) {
  const divs = $('.wrap div').click(function() {
    divs.removeClass('active');
    $(this).addClass('active');
    resetTimer();
  });

  let interval;

  function resetTimer() {
    clearInterval(interval);
    interval = setInterval(function() {
      let next = divs.filter('.active').next();
      if (next.length === 0)
        next = divs.first();
      next.click();
    }, 2000);
  }
  
  resetTimer();
});
.wrap .active {
  background: red;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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