Как переключить класс элементов в последовательности?

Я пытаюсь, чтобы класс каждого элемента менялся поочередно автоматически. Это означает, что элемент 1 светится, затем гаснет, элемент 2 светится, затем гаснет и так далее. Когда каждый элемент светится один раз, вся последовательность начинается заново.

$('header div:first').toggleClass('highlight').nextAll().toggleClass('none');

function highlight() {
  var $off = $('header div.highlight').toggleClass('none');

  if ($off.next().length) {
    $off.next().toggleClass('none');
  } else {
    $off.prevAll().last().toggleClass('highlight');
  }
}

$(document).ready(function() {
  setInterval(highlight, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
 <div>element 1</div>
 <div>element 2</div>
 <div>element 3</div>
 <div>element 4</div>
</header>

Он не будет работать должным образом (элементы со 2 по 4 подсвечиваются все одновременно, а затем выключаются, а элемент 1 вообще не меняется), и я не знаю почему. Что я делаю неправильно?

Источник

4 ответа

Решение

Так что да, вам не нужно .none, Просто используйте ваши стили по умолчанию и .highlight учебный класс.
Получить количество предметов, создать c Аунтер, увеличить его и зациклить, используя % Оператор напоминания:

jQuery(function( $ ) { // DOM is ready

  var $el = $("header>div"), tot = $el.length, c = 0;

  $el.eq(c).addClass("highlight"); // initial highlight

  setInterval(function() {
    $el.removeClass("highlight").eq(++c%tot).addClass("highlight");
  }, 1000);

});
header > div           { transition:0.5s; -webkit-transition:0.5s; }
header > div.highlight { color:#f0f; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
 <div>element 1</div>
 <div>element 2</div>
 <div>element 3</div>
 <div>element 4</div>
</header>

Некоторые документы:
https://api.jquery.com/eq/
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators

Источник

none класс вместе с toggleClass() звонки могут быть немного запутанными, чтобы прочитать. Вы можете быть лучше, просто отслеживая свой текущий выделенный элемент через div.highlight и определение того, на кого следует нацелиться, используя обновленный код ниже:

function highlight() {
    // Remove the highlight from all options
    var $current = $('div.highlight');
    // Store the next one
    var $next = $current.next('div');
    // Remove all highlighting
    $('div.highlight').removeClass('highlight')
    if($next.length){
      $next.addClass('highlight');
    } else {
      $('header div:first').addClass('highlight');
    }
}
// When the document is ready
$(function() {
    // Initially set your first element as highlighted and start your interval
    $('header div:first').addClass('highlight');
    setInterval(highlight, 1000);
});

пример

Вы можете увидеть пример этого в действии здесь и продемонстрировано ниже:

Изображение только для примера, а время может отличаться от реального выполнения кода... :)

Источник

Решение:

+ Изменить .none от .highlight, как это:

$('header div:first').toggleClass('highlight');

function highlight() {
  var $off = $('header div.highlight').toggleClass('highlight');

  if ($off.next().length) {
    $off.next().toggleClass('highlight');
  } else {
    $off.prevAll().last().toggleClass('highlight');
  }
}

$(document).ready(function() {
  setInterval(highlight, 1000);
});
.highlight {
   color:red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
 <div>element 1</div>
 <div>element 2</div>
 <div>element 3</div>
 <div>element 4</div>
</header>

Другие способы: 

$('header div:first').toggleClass('highlight');

setInterval(function() {
  var abc = "highlight";
      $off = $('header div.' + abc),
      $next = $off.next().length ? $off.next() : $off.prevAll().last();

  $off.toggleClass(abc);
  $next.toggleClass(abc);
}, 1000);
.highlight {
   color:red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
 <div>element 1</div>
 <div>element 2</div>
 <div>element 3</div>
 <div>element 4</div>
</header>

Источник

Вы можете попробовать этот подход.

Javascript

var highlight = function(){
$('header div').removeClass('highlight');
$('header div').each(function(i,v) {
setTimeout(function(){$(v).prev().toggleClass('highlight');$(v).toggleClass('highlight');}, i*1000);
});
setTimeout(highlight, ($('header div').length)*1000);
};
highlight();

скрипка

Источник
Другие вопросы по тегам