Question

我正在使用JavaScript创建用于管理1x和2x图像翻转的函数。

我有一个嵌套在div标签中的图像集合，可以更有效地分组和通过JavaScript进行访问...

即var rollOverCollectionA = document.getElementById('roll-over-collection-a').querySelectorAll('img');

但更确切地说，每个图像都嵌套在<picture>标签中。见下文：

  <div id="roll-over-collection-a">
    <a href="#">
      <picture>
        <img id="hover-1" src="images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_1.jpg?$staticlink$"
          srcset="/images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_1.jpg?$staticlink$, images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_1@2x.jpg?$staticlink$ 2x"
        />
      </picture>
    </a>
    <a href="#">
      <picture>
        <img id="hover-2" src="images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_2.jpg?$staticlink$"
          srcset="images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_2.jpg?$staticlink$, images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_2@2x.jpg?$staticlink$ 2x"
        />
      </picture>
    </a>
    <a href="#">
      <picture>
       <img id="hover-3" src="images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_3.jpg?$staticlink$" srcset="images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_3.jpg?$staticlink$, images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_3@3x.jpg?$staticlink$ 2x"/>
      </picture>
    </a>
  </div>

这是脚本：

var on = function(event, elem, callback, capture) {
  if (typeof elem === 'function') {
    capture = callback;
    callback = elem;
    elem = window;
  }
  capture = capture ? true : false;
  elem = typeof elem === 'string' ? document.querySelector(elem) : elem;
  if (!elem) return;
  elem.addEventListener(event, callback, capture);
};

function rollOver(elem) {
  if(document.getElementById(elem).src = `images/home-page/desktop/EYES_ON_YOU_desktop_HP_HOVER_${elem.slice(elem.length-1)}.jpg?$staticlink$`) {
    document.getElementById(elem).src = `images/home-page/desktop/EYES_ON_YOU_desktop_HP_HOVER_${elem.slice(elem.length-1)}.jpg?$staticlink$`
  }
  if (
    (document.getElementById(
      elem
    ).srcset = `images/home-page/desktop/EYES_ON_YOU_desktop_HP_HOVER_${elem.slice(
      elem.length - 1
    )}@2x.jpg?$staticlink$`)
  ) {
    document.getElementById(
      elem
    ).srcset = `images/home-page/desktop/EYES_ON_YOU_desktop_HP_HOVER_${elem.slice(
      elem.length - 1
    )}@2x.jpg?$staticlink$`;
  }

}

function rollOut(elem) {
  if (document.getElementById(elem).src = `images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_${elem.slice(elem.length-1)}.jpg?$staticlink$`){
    document.getElementById(elem).src = `images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_${elem.slice(elem.length-1)}.jpg?$staticlink$`
  }
  if (
    (document.getElementById(
      elem
    ).srcset = `/images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_${elem.slice(
      elem.length - 1
    )}@2x.jpg?$staticlink$`)
  ) {
    document.getElementById(
      elem
    ).srcset = `images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_${elem.slice(
      elem.length - 1
    )}@2x.jpg?$staticlink$`;
  }

}
document.addEventListener("DOMContentLoaded", function(event) {
  var rollOverCollectionA = document.getElementById('roll-over-collection-a').querySelectorAll('img');
      rollOverCollectionA = Array.prototype.slice.apply(rollOverCollectionA);
    console.log(rollOverCollectionA);
      for (let i = 0; i < rollOverCollectionA.length; i++) {
       on('mouseover', `#${rollOverCollectionA[i].id}`, function(){
         rollOver(rollOverCollectionA[i].id);
       });
       on('mouseout', `#${rollOverCollectionA[i].id}`, function(){
        rollOut(rollOverCollectionA[i].id);
       }); 
      }
});

当img元素未嵌套在picture标签中，但当img标签嵌套在picture中时，脚本似乎可以正常工作，即图像翻转成功。标记不起作用，即图像翻转失败。

检查console.log(rollOverCollectionA); 我确实看到了图像元素的集合，但是我意识到rollOver和rollOut函数中存在缺陷。

以我的方式，我正在检查是否确实有srcset服饰及其价值。我想要的是一种方法，可以了解picture属性是否已将2x加载到浏览器中。

注意：

我尝试从img中删除每个picture tags标签，并且可以使用！

任何帮助将不胜感激！

图片标签阻止DOM操作？

0 个答案: