Как изменить элемент из DOM, а затем вернуть его в исходное состояние в JavaScript?

Question

Я создал функцию, которая циклически перебирает DOM целевого объекта (через id) для создания функции переноса.

Моя проблема заключается в функции rollOver/rollOut.По какой-то причине среда, в которой я запускаю этот скрипт, кажется, имеет беспорядок с атрибутом srcset.

Это оригинал:

function rollOver(elem) {
  (document.getElementById(elem).srcset =
    "https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dw685f8968/images/home-page/desktop/eyes-on-you-desktop-hover-" +
    elem.slice(6) +
    ".jpg?$staticlink$"),
    "https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dw685f8968/images/home-page/desktop/eyes-on-you-desktop-2x-hover-" +
    elem.slice(6) +
    ".jpg?$staticlink$ 2x";
}

function rollOut(elem) {
  (document.getElementById(elem).srcset =
    "https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dw685f8968/images/home-page/desktop/eyes-on-you-desktop-" +
    elem.slice(6) +
    ".jpg?$staticlink$"),
    "https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dw685f8968/images/home-page/desktop/eyes-on-you-desktop-2x-" +
    elem.slice(6) +
    ".jpg?$staticlink$ 2x";
}

rollOver:

path/to/image/eyes-on-you-desktop-hover-" + elem.slice(6) + ".jpg?$staticlink$"

rollOut:

path/to/image/eyes-on-you-desktop-" + elem.slice(6) +".jpg $staticlink$"

Отсюда берется переменная elem ...

document.addEventListener("DOMContentLoaded", function (event) {
  var rollOverCollectionA = document
    .getElementById("roll-over-collection-b")
    .getElementsByClassName("rollover");
  rollOverCollectionA = Array.prototype.slice.apply(rollOverCollectionA);

  var l = rollOverCollectionA.length;
  for (let i = 0; i < l; i++) {
    on("mouseover", `#${rollOverCollectionA[i].id}`, function () {
      rollOver(rollOverCollectionA[i].id);
    });
    on("mouseout", `#${rollOverCollectionA[i].id}`, function () {
      rollOut(rollOverCollectionA[i].id);
    });
  }
});

и это просто значение #id в элементе, которое разрезается так, чтобы совпадать с элементом, которыйполучает фокус.

Я пробовал что-то вроде этого:

  function rollOver(id, elem ) {
    elem.srcset = elem.srcset.splice(174, 0, '-hover');
    elem.srcset = elem.srcset.splice(362, 0, 'hover-')
    document.getElementById(id).srcset = elem.srcset;
  }

  function rollOut(id, elem) {
    document.getElementById(id).srcset = elem.srcset;
  }

Но то, что он делает, постоянно добавляет 'hover к элементу elem.srcset / string!

ОБНОВЛЕНИЕ

Это рабочая демо .

ОБНОВЛЕНИЕ

Это пример того, что происходит,

Ролловер добавляет hover к состоянию non-hover, но затем при следующем наведении курсора src теперь имеет `xxx-1-hover-hover.jpg

Буду признателен за любую помощь!