javascript - 如何从 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";
}

滚下：

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

推出：

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 ！

更新

这是一个工作演示。

更新

这是正在发生的事情的一个例子。

翻转将悬停附加到非悬停状态，但是下次悬停时，src 现在有 `xxx-1-hover-hover.jpg

任何帮助，将不胜感激！

标签： javascriptdommouseovermouseoutmutation