Comment muter un élément du DOM, puis le retourner à son état d'origine en JavaScript?

voix
0

Je me suis fait une fonction qui cycles à travers le DOM d'une cible sont (via id) pour créer une fonctionnalité de survol.

Mon problème se situe dans la rollOver/rollOutfonction. Pour une raison quelconque l'environnement dans lequel je lance ce script semble jouer avec l' srcsetattribut.

Ceci est l'original:

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;
}

rouler:

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

sortir:

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

La variable élém vient d'ici ...

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);
    });
  }
});

et sa juste la #idvaleur sur la élém qui obtient coupé en tranches pour coïncider avec l'élément qui reçoit le focus.

J'ai essayé quelque chose comme ceci:

  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;
  }

Mais ce que cela fait est d'ajouter sans cesse « vol stationnaire à la elem.srcset / string!

METTRE À JOUR

Ceci est un travail démo .

METTRE À JOUR

Ceci est un exemple de ce qui se passe.

entrez

Le roulement à l'hover ajoute état non vol stationnaire, mais la prochaine fois que vous passez la src `a maintenant xxx-1-vol stationnaire-hover.jpg

Toute aide serait appréciée!

Créé 27/11/2018 à 15:16
source utilisateur
Dans d'autres langues...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more