Задать вопрос
mrka4an
@mrka4an
простой парень
javascript

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

как сделать так чтобы при клике на header класс hidden отпускался на элемент ниже и на последнем вернутся на первый ( цикл )? 

<body>
	<header>
    	<div class="block">Hello!</div>
    	<div class="block hidden">Салем!</div>
    	<div class="block hidden">Привет!</div>
    	<div class="block hidden">Merhaba!</div>
	</header>

	
	<script src="js/jquery.min.js"></script>
	<script src="js/js.js"></script>
</body>
  • Вопрос задан
  • 135 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 3
iiiBird
@iiiBird
Пока ты спишь - твой конкурент совершенствуется
https://jsfiddle.net/6g7Lmu7o/
Ответ написан
1 комментарий
1 комментарий
Emptyform
@Emptyform
А может не надо плодить DIV-ы. Заведите себе массив с приветствиями и их и перебирайте при клике.
А то как-то топроно выглядит.
зы. студент, да?
Ответ написан
2 комментария
2 комментария
abyrkov
@abyrkov
JavaScripter 
$('.block').on('click', function() {
  var _this = $(this);
  var parent = _this.parent();
  var el = parent.find('.block:not(.hidden)').toggleClass('hidden');
  if(el[0] == parent.find('.block').last()[0]) parent.find('.block').first().toggleClass('hidden');
  else el.next('.block').toggleClass('hidden');
})

Не проверял
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработка функционала на Nuxt 3 + express.js
04 мая 2024, в 16:30
800 руб./в час
Добавить слой высот в существующую карту на Leaflet
04 мая 2024, в 16:27
20000 руб./за проект
Расшифровать шифрограмму RSA
04 мая 2024, в 16:18
2000 руб./за проект
Ещё заказы