Как достать следующий элемент массива?

Question

[Александр Шаповал]

Есть поле input c заданным цветом фона в css, по клику сейчас рандомно подставляется цвет

$('#typeProject').click(function(){
            var colors = ['green', 'red', 'blue', 'yellow'];
            var key = Math.round(Math.random()*(colors.length-1))
            $('.typeProject').css('background-color', colors[key]);
            console.log(key);
        });

Как сделать так что цвет брался не рандомно а последовательно? Сначала зеленый, еще раз кликнули, красный, и так далее.

Answer 1

[Боб Хоуп]

Можно попробовать так: https://codepen.io/glebez/pen/mMPqbW

Comments

[Александр Шаповал]

Спасибо

Answer 2

[0xD34F]

function* cyclicSequence(items) {
  for (var i = 0; ; i = (i + 1) % items.length) {
    yield items[i];
  }
}

var color = cyclicSequence([ 'green', 'red', 'blue', 'yellow' ]);

$('#typeProject').click(function() {
  $('.typeProject').css('background-color', color.next().value);
});

Comments

[Александр Шаповал]

а что эта звездочка значит function* ?

[0xD34F]

Что функция является генератором.

Подробнее о генераторах.

[Александр Шаповал]

0xD34F: спасибо

Answer 3

[Николай Чуприк]

Сделать key глобальной переменной и брать

key = (key+1) % colors.length

Comments

[Александр Шаповал]

не помогло, может я не правильно понял.
Вот код https://github.com/Sanek-OS9/Task/blob/master/Stat...

[Николай Чуприк]

Так вы же не объявили key глобально. Где var?

[Александр Шаповал]

Николай Чуприк: объявил, работает, спасибо. Можно еще вопрос, почему если key объявить внутри

$('#typeProject').click(function(){
var key =0;
}

то при клике ничего не происходит, не меняется значение key
а если объявить выше, то работает

var key = 0;
$('#typeProject').click(function(){
}

[Николай Чуприк]

Если объявить key внутри функции, то после того, как она отработает, значение key теряется. При очередном вызове функции по клику key инициализируется заново.

[Александр Шаповал]

Николай Чуприк: спасибо, логично вроде.

Answer 4

[twobomb]

$('#typeProject').click(function(){
						if(!$(".typeProject").attr("data-numcolor"))
           	 	$(".typeProject").attr("data-numcolor",0);
            var colors = ['green', 'red', 'blue', 'yellow'];
            var num = $(".typeProject").attr("data-numcolor");
            $('.typeProject').css('background-color', colors[num++]);
            num %= colors.length;
            	$(".typeProject").attr("data-numcolor",num);
        });

Comments

[Александр Шаповал]

Суть в том что бы добавить новый атрибут data-numcolor а потом из этого атрибута извлекать ключ? Тоже вариант, спасибо.
Тут дали пару ответов как можно обойтись без добавления дополнительного атрибута, посмотрите.

[twobomb]

Александр Шаповал: Ну так с атрибутом то куда лучше. А если у вас таких объектов будет 100, что вы будете создавать масиив и с ним еб***я?

[Александр Шаповал]

twobomb: вы наверное не поняли, суть работы вся та же, поочередно перебирать массив сколько бы там элементов не было, хоть 100)

[twobomb]

Александр Шаповал: Я просто говорю как бы сделал я, и то что этот метод лишних переменных я не поддерживаю.

[Александр Шаповал]

twobomb: работает с той лишь разницей что вы храните последней использованный ключ в атрибуте, а там в переменной.

[Александр Шаповал]

twobomb: я вас понял, я не критикую, просто указал на еще один аналогичный вариант.

[twobomb]

Александр Шаповал: На словах просто, а вы сделайте чтобы для каждого объекта .typeProject хранился свой текущий цвет. При загрузке вам придется подсчитать количество этих объектов, кроме того нужно решить проблему, какому объекту соответсвует какой элемент массива последовательности цветов. Чем это реализовывать проще сделать моим методом где номер привязан к элементу и его не нужно выискивать по каким-то массивам. Другое дело если вам на все объекты нужен 1 цвет, тогда хватит и 1 переменной.

[Боб Хоуп]

эта штука работает без создания массивов и необходимости с ними еб***я ;)
https://codepen.io/glebez/pen/mMPqbW

[Александр Шаповал]

twobomb: в таком случае да, но как указал выше Боб Хоуп все таки можно обойтись без атрибута)