Перебирать заданный массив цветов для svg и текста mouseenter/mouseleave?

Question

[SuperToster]

Привет!

Нетривиальная задача -_-

Есть вот такое лого jsfiddle.net/y2ax96f3 из svg и текста.

Подскажите пожалуйста как реализовать, чтобы при каждом mouseenter/mouseleave для svg и текста по порядку перебирался заданный массив цветов, например:
#B5E6FF
#C2F2DF
#E0F2CB
#F0EDD3
#F7EBDF
#FAD4D4
#FAD4EC

Answer 1

[0xD34F]

Нетривиальная задача

Тривиальная.

Добавляем элементам data-атрибуты, которые будут содержать индекс текущего цвета и имя css-свойства, которое соответствующий цвет будет получать в качестве значения:

<svg
  data-color-index="-1"
  data-color-attr="fill"
  ...

<span
  data-color-index="-1"
  data-color-attr="color"
  ...

По mouseenter делаем индексу +1, обновляем значение css-свойства; по mouseleave записываем в css-свойство пустую строку:

$('svg, span').mouseenter(function() {
  const colorIndex = (+this.dataset.colorIndex + 1) % colors.length;

  $(this).css(this.dataset.colorAttr, colors[colorIndex]);
  this.dataset.colorIndex = colorIndex;
}).mouseleave(function() {
  $(this).css(this.dataset.colorAttr, '');
});

Если элементы должны менять цвет одновременно, тогда отдельные data-атрибуты для индексов не нужны, достаточно одной общей переменной. А обработчики событий цепляем к родительскому элементу:

let index = -1;

$('.demo').mouseenter(function() {
  index = (index + 1) % colors.length;
  updateColor(this, colors[index]);
}).mouseleave(function() {
  updateColor(this, '');
});

function updateColor(el, color) {
  $('[data-color-attr]', el).each(function() {
    $(this).css(this.dataset.colorAttr, color);
  });
}

Comments

[SuperToster]

0xD34F
Спасибо, Виктор! Восхищаюсь вашим мозгом! ^^
Чуть допилил и получилось супер круто : )

Answer 2

[Виталий Киренков]

Это очень топорный вариант.
https://codepen.io/vitaliy_kirenkov/pen/YBzvar

Есть массив классов, у каждого элемента есть индекс. У вас должна быть переменная-счётчик, у которой максимальное значение - длина массива. Значение этого счётчика увеличивается при каждом событии.