Question

我有两个函数用于实现翻转效果：

function rollOver(elem) {
  console.log(elem.slice(elem.length - 1))
  document.getElementById(`${elem}`).src = "images/home-page/desktop/EYES_ON_YOU_desktop_HP_HOVER_" + elem.slice(elem.length - 1) + ".jpg?$staticlink$";
}

function rollOut(elem) {
  console.log(elem.slice(elem.length - 1))
  document.getElementById(`${elem}`).src = "images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_" + elem.slice(elem.length - 1) + ".jpg?$staticlink$";
}

被称为...

document.addEventListener("DOMContentLoaded", function(event) {
  var rollOverCollectionA = document
    .getElementById("roll-over-collection-a")
    .querySelectorAll("img");
    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); // Here!
        });
        on("mouseout", `#${rollOverCollectionA[i].id}`, function() {
          rollOut(rollOverCollectionA[i].id); // And here!
        });
      }

});

这是相关的标记：

 <div id="roll-over-collection-a">
    <div class="one-third column">
        <a href="#">
          <img id="hover-1" class="u-max-full-width make-up-img color-palette" alt="Eyes on you - Color Palette" src="images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_1.jpg?$staticlink$" />
        </a>
        <div class="button">
          <a href="$url('Product-Show','pid','1503A0115000')$">SHOP NOW</a>
        </div>
    </div>
    <div class="one-third column">
        <a href="#">
          <img id="hover-2" class="u-max-full-width make-up-img" alt="Eyes on you - Eye Topper" src="images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_2.jpg?$staticlink$" />
        </a>
        <div class="button">
            <a href="$url('Product-Show','pid','1503A0115000')$">SHOP NOW</a>
        </div>
    </div>
    <div class="one-third column">
        <a href="#">
          <img id="hover-3" class="u-max-full-width make-up-img" alt="Eyes on you - Eyeliner" src="images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_3.jpg?$staticlink$" />
        </a>
        <div class="button">
          <a href="$url('Product-Show','pid','1503A0115000')$">SHOP NOW</a>
        </div>
    </div>
</div>

但是，当rollOver/rollOut得到rollOverCollectionA[i].id时（例如，我们在第一个元素上），它应该产生hover-1作为字符串，而elem.slice(elem.length - 1)应该等于{{1 }}，再次作为字符串。

但我回来了：

function rollOver(elem) { document.getElementById(`${elem}`).src = "xx/xx/x/EYES_ON_YOU_desktop_HP_HOVER_" + elem.slice(elem.length - 1) + ".jpg?$staticlink$"; }

自然会产生"https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/v1541390570323/.jpg";。

实际上是通过控制台查看的，我在脚本标签中看到的功能是这样的：

所以谁能告诉我slice方法为什么输出

function rollOver(elem) { console.log(elem.slice(elem.length - 1)) document.getElementById(`${elem}`).src = "images/home-page/desktop/EYES_ON_YOU_desktop_HP_HOVER_" + elem.slice(elem.length - 1) + "https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/v1541390570323/.jpg"; } function rollOut(elem) { console.log(elem.slice(elem.length - 1)) document.getElementById(`${elem}`).src = "images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_" + elem.slice(elem.length - 1) + "https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/v1541390570323/.jpg"; }

代替

https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/v1541390570323/.jpg

更新

这是一个有趣的视觉效果。而不是插入字符串https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/v1541390570323/EYES_ON_YOU_desktop_HP_HOVER_1.jpg的字符串1

实时示例：

ihttps://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/v1541390570323/.jpg

function rollOver(elem) {
  console.log(elem.slice(elem.length - 1))
  document.getElementById(`${elem}`).src = "images/home-page/desktop/EYES_ON_YOU_desktop_HP_HOVER_" + elem.slice(elem.length - 1) + ".jpg?$staticlink$";
  console.log("src = " + document.getElementById(`${elem}`).src);
}

function rollOut(elem) {
  console.log(elem.slice(elem.length - 1))
  document.getElementById(`${elem}`).src = "images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_" + elem.slice(elem.length - 1) + ".jpg?$staticlink$";
  console.log("src = " + document.getElementById(`${elem}`).src);
}

function on(eventName, selector, callback) {
  document.querySelector(selector).addEventListener(eventName, callback);
}

document.addEventListener("DOMContentLoaded", function(event) {
  var rollOverCollectionA = document
    .getElementById("roll-over-collection-a")
    .querySelectorAll("img");
    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); // Here!
        });
        on("mouseout", `#${rollOverCollectionA[i].id}`, function() {
          rollOut(rollOverCollectionA[i].id); // And here!
        });
      }

});

JavaScript中的Slice方法正在删除不需要的字符

0 个答案: