Форум

Black_Star · #1 (**permalink**) 22.07.2016, 16:00

Добрый день уважаемые. Вот возникла необходимость в реализации следующего цикла.

Каждую секунду происходит замена цвета элементов строки списка, при этом на следующую секунду предшествующее значение класса предыдущего элемента убирается. Цикл бесконечен.

<ul id="list">
         <li>Один</li>
         <li>Два</li>
         <li>Три</li>
         <li>Четыре</li>
</ul>

$(function(){
        			$("#list li").each( function (){


        			setTimeout(function () {
        				$(this).css("color", "green")

								}, 1000);		        	

        			});

        	});

Подскажите, как такое реализовать. Мой JS не хочет почему-то задавать задержку.

Spass · #2 (**permalink**) 22.07.2016, 16:25

this в setTimeout(function () работать не будет, точнее будет возвращать совсем не то что ты хочешь.

dd_smol · #3 (**permalink**) 22.07.2016, 16:53

jQuery(function ($) {
	$('#list > li').each(function (i, el) {
		setTimeout(function () {
			el.style.color = 'green';
		}, 1000);
	});
});

this

Black_Star · #4 (**permalink**) 22.07.2016, 20:03

Эмм чёт не понятно оно работает https://jsfiddle.net/BlackStar1991/ogkbtse2/
Оно ждет 3сек, и закрашивает все элементы списка разом(. Не то

рони · #5 (**permalink**) 22.07.2016, 20:27

Black_Star,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
var item = $("#list li"), indx = -1, len = item.length;
(function go()
{
  item.eq(indx).css("color", "")
  indx = ++indx % len;
  item.eq(indx).css("color", "green")
  setTimeout(go,1000)
}())
});
  </script>
</head>

<body>

<ul id="list">
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
  <li>Четыре</li>
</ul>



</body>
</html>

dd_smol · #6 (**permalink**) 22.07.2016, 22:11

Сообщение от Black_Star

Эмм чёт не понятно оно работает https://jsfiddle.net/BlackStar1991/ogkbtse2/
Оно ждет 3сек, и закрашивает все элементы списка разом(. Не то

Все правильно сразу не сообразил цыкал отрабатывает сразу не дожидаясь функции с задержкой ...

jQuery(function ($) {
	$('#list > li').each(function (i, el) {
		setTimeout(function () {
			el.style.color = 'green';
		}, i * 1000);
	});
});

рони · #7 (**permalink**) 22.07.2016, 22:29

dd_smol,

Сообщение от Black_Star

Цикл бесконечен.

dd_smol · #8 (**permalink**) 23.07.2016, 08:26

Ooops, Не внимательный я ... не стал читать пост до конца а полез смотреть код увидел проблемы и сделал свой вывод об ошибки на ней и заострил внимание. Прошу прошение что начал водить в заблуждение.

Форум

Справочник

Discord чат

Курсы javascript