Блог

Главная - Вопросы по программированию - Измените активный класс через 5 секунд (и предотвратите изменение, если пользователь наводит курсор на элемент)

Измените активный класс через 5 секунд (и предотвратите изменение, если пользователь наводит курсор на элемент)

#javascript #html #jquery #settimeout

#javascript #HTML #jquery ( jquery ) #settimeout

Вопрос:

Я создаю простой раздел с вкладками, в котором каждая вкладка будет становиться активной каждые 5 секунд.

Изначально trigger 1 в моей демо-версии будет активен, затем через 5 секунд цель состоит в том, чтобы сделать trigger 2 активным (на данный момент trigger 1 не будет активным) и так далее.

В дополнение к этому, если, например, trigger 1 активен, но пользователь хочет получить доступ trigger 5 , я хочу, чтобы функция тайм-аута приостанавливалась при наведении курсора мыши на элемент триггера.

У меня возникли трудности с тем, чтобы следующий триггер отображался как активный и приостанавливал тайм-аут при наведении курсора мыши .trigger-single

ДЕМОНСТРАЦИЯ:

 $(function() {

    // add active class to first item
  $(".triggers .trigger-single:first-child").addClass("activeTrigger");
  
  // users can also click to the trigger they want, when doing so
  $('.triggers .trigger-single').click(function() {
    $(".triggers .trigger-single").removeClass("activeTrigger");
    $(this).addClass("activeTrigger");
  });
  
  // trying to get the next trigger to be active after 5 seconds
  window.setTimeout(function(){
    $(".triggers .trigger-single").closest(".trigger-single").removeClass("activeTrigger").addClass("activeTrigger");
  },5000);

});  
 .triggers{
  display: flex;
}

.trigger-single{
  padding: 10px 20px;
  border: 1px solid grey;
  cursor: pointer;
}

.activeTrigger{
  background: lightblue;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="triggers">
  <div class="trigger-single">Trigger 1</div>
  <div class="trigger-single">Trigger 2</div>
  <div class="trigger-single">Trigger 3</div>
  <div class="trigger-single">Trigger 4</div>
  <div class="trigger-single">Trigger 5</div>
</div>

Комментарии:

1. jsfiddle.net/sfwo6gxn

2. @natel — Эта скрипка не делает то, что я хочу?

3. Вы видите, как .hover используется в этом примере? Это намек.

4. Что касается таймаута и счетчика, вот некоторый код, который поможет в этом. jsfiddle.net/Daniel_Hug/pvk6p Возможно, теперь вы сами сможете ответить на свой вопрос.