Как сделать, чтобы при наведении на блок картинки последовательно менялись?

Question

[Anton]

Дано:
див, в пользовательском атрибуте data-arr массив из строк с цветами, которые должны динамически меняться при наведении мышкой на нее.

Проблема: при установке в обработчике setInterval теряется контекст, соответственно я не могу использовать this для указания на нужный элемент.

Код: jsfiddle.net/zqz2jfm1

Вопрос: что поменять в коде, чтобы работало :)

Comments

[romy4]

а this чем должно быть?
ну если применять контекст, то counter.apply()

[Anton]

this должен указывать на источник события. Пробовал вместо него задать event.target, но почему-то до counter() обьект event не доходит.

Answer 1

[Anton]

Было найдено следующее решение: замыкание с счетчиком перенесено внутрь обработчика события и перед установкой setInterval $(this) присвоено другой переменной, чтобы this продолжало ссылаться на источник события вместо глобалльного обьекта

код: jsfiddle.net/zqz2jfm1/4

Answer 2

[Константин Громов]

Вы обращаетесь к this единожды за весь сценарий в момент вызова counter, который происходит в глобальной области видимости. Проще говоря контекст не теряется, а изначально неверен (this === window). К тому же, в любой случае, вам нужно вызывать counter для каждого элемента отдельно при старте setInterval, чтобы массивы со цветами соответствовали элементам. Как дальнейшее улучшение, можно вместо перевызова counter каждый раз при наведении делать это один раз при первом наведении и сохранять возвращённую функцию в $.fn.data, и в дальнейшем брать её оттуда.