Question

控制台在此行停止并显示错误：

NewData: [
 {"id":1,"rp":"2426","cr":"11/11"},
 {"id":1,"rp":"1119","cr":"19/21"},
 {"id":1,"rp":"3453","cr":"23/81"}
]

这一行是本节的一部分。

Unable to get property 'srcset' of undefined or null reference

var srcObj = rollOverCollectionA[i].srcset.splice(171, 0, '-hover');

document.addEventListener("DOMContentLoaded", function (event) { var rollOverCollectionA = document.getElementById("roll-over-collection-b").getElementsByClassName("rollover"); rollOverCollectionA = Array.prototype.slice.apply(rollOverCollectionA); console.log("rollOverCollectionA", rollOverCollectionA); var l = rollOverCollectionA.length; for (let i = 0; i < l; i++) { on("mouseover", "#" + rollOverCollectionA[i].id, function () { var srcObj = rollOverCollectionA[i].srcset.splice(171, 0, '-hover'); srcObj.splice(362, 0, 'hover-') rollOver(rollOverCollectionA[i].id, srcObj); }); on("mouseout", "#" + rollOverCollectionA[i].id, function () { // remove the hovers rollOut(rollOverCollectionA[i].id, rollOverCollectionA[i].srcset.replace('-hover', '').replace('hover-', '')); }); } });在集合范围之外，但是我将i用于let，如this question's answers所示。

是什么原因导致IE？可以在Chrome，Firefox和Safari以及Mac和PC上的Edge中使用。

这是一个可运行的示例：

var on = function(event, elem, callback, capture) {
  console.log('elem in onFunction', elem);
  console.log('elem in onFunction', typeof elem);
  if (typeof elem === "function") {
    capture = callback;
    callback = elem;
    elem = window;
  }
  capture = !!capture;
  elem = typeof elem === "string" ? document.querySelector(elem) : elem;
  if (!elem) return;
  elem.addEventListener(event, callback, capture);
};

function rollOver(elem, src) {
  console.log('rollOver src', src);
  document.getElementById(elem).srcset = src;
}

function rollOut(elem, src) {
  console.log('rollOut src', src);
  document.getElementById(elem).srcset = src;
}
if (!String.prototype.splice) {
  /** * {JSDoc} * * The splice() method changes the content of a string by removing a range of * characters and/or adding new characters. * * @this {String} * @param {number} start Index at which to start changing the string. * @param {number} delCount An integer indicating the number of old chars to remove. * @param {string} newSubStr The String that is spliced in. * @return {string} A new string with the spliced substring. */
  String.prototype.splice = function(start, delCount, newSubStr) {
    return this.slice(0, start) + newSubStr + this.slice(start + Math.abs(delCount));
  };
}

document.addEventListener("DOMContentLoaded", function(event) {
  var rollOverCollectionA = document.getElementById("roll-over-collection-b").getElementsByClassName("rollover");
  rollOverCollectionA = Array.prototype.slice.apply(rollOverCollectionA);
  console.log("rollOverCollectionA", rollOverCollectionA);
  var l = rollOverCollectionA.length;
  for (let i = 0; i < l; i++) {
    on("mouseover", "#" + rollOverCollectionA[i].id, function() {
      var srcObj = rollOverCollectionA[i].srcset.splice(171, 0, '-hover');
      srcObj.splice(362, 0, 'hover-')
      rollOver(rollOverCollectionA[i].id, srcObj);
    });
    on("mouseout", "#" + rollOverCollectionA[i].id, function() {
      // remove the hovers
      rollOut(rollOverCollectionA[i].id, rollOverCollectionA[i].srcset.replace('-hover', '').replace('hover-', ''));
    });
  }
});

.homepage-banner .offers-banner .button {
  background-color: #000;
}

.homepage-banner .offers-banner .button a {
  color: #fff;
}

.homepage-banner .offers-banner a {
  margin: 0px auto;
}

.homepage-banner .offers-banner {
  text-align: center;
  padding: 20px 0 0;
  margin: 50px auto 0;
  bottom: inherit;
  position: relative;
}

.homepage-banner .offers-banner h2 {
  margin-bottom: 8px;
  width: 90%;
  font-size: 36px;
  padding: 0;
  line-height: 34px;
  margin: 0 0 10px;
}

.homepage-banner .offers-banner p {
  font-family: termina, sans-serif;
  margin: 25px auto !important;
  font-weight: 600;
  /* font-size: 15px; */
}

.homepage-banner .offers-banner p:last-of-type {
  margin-bottom: 0;
}


/* .homepage-banner .offers-banner a:hover {
      color: #000;
    } */

.homepage-banner .offers-banner .offer-banner-content-wrapper {
  position: relative;
}

.homepage-banner .offers-banner .offers-listing-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  text-align: left;
  margin: 0 auto;
  flex-flow: nowrap;
  align-self: flex-start;
  justify-content: center;
}

.homepage-banner .offers-banner .offers-listing-container .item {
  width: 33%;
  text-align: center;
  padding-bottom: 10px;
}

.homepage-banner .offers-banner .offers-listing-container .item .item-name {
  margin: 20px auto 0;
}

.homepage-banner .offers-banner .offers-listing-container .item .item-name p {
  text-align: center;
  font-size: 16px;
  line-height: 20px;
  margin: 20px auto 0;
  text-transform: uppercase;
}

.homepage-banner .offers-banner .offers-listing-container .item:nth-of-type(2n) {
  margin: 0;
}

.homepage-banner .offers-banner .offers-listing-container .item .item-name .button.button-helper {
  margin-bottom: 0;
  padding: 3px 8px;
  background-color: #e87ea6;
  border-color: #e87ea6;
  border-radius: 0;
  border-style: solid;
  border-width: 1px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  padding: .23em 2em;
  text-align: center;
  transition: all .3s ease;
  outline: 0;
  font-family: termina, sans-serif;
  font-weight: 500;
  font-style: normal;
  -webkit-font-kerning: none;
  -moz-font-kerning: none;
  font-kerning: none;
  text-transform: uppercase;
  line-height: inherit;
  height: inherit;
}

div#roll-over-collection-b {
  position: absolute;
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .homepage-banner .offers-banner .offers-listing-container .item {
    width: 30%;
  }
  .homepage-banner .offers-banner .offers-listing-container .item:nth-of-type(2n) {
    margin: 0 2em;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .homepage-banner .offers-banner .offers-listing-container .item:nth-of-type(2n) {
    margin: 0 3em;
  }
  .homepage-banner .offers-banner .offers-listing-container .item {
    width: 26%;
  }
}

@media screen and (max-width: 767px) {
  .homepage-banner .offers-banner {
    margin: 0;
  }
  .homepage-banner .offers-banner picture>img {
    /* width: 100%; */
    height: auto;
    line-height: 0;
    vertical-align: bottom;
  }
  .homepage-banner .offers-banner h2 {
    font-size: 24px;
    line-height: 26px;
    width: 95%;
    margin: 0 auto 10px;
  }
  .homepage-banner .offers-banner p {
    width: 95%;
    margin: 0px auto 10px;
    font-size: 16px;
    font-weight: 400;
  }
  .homepage-banner .offers-banner .button {
    background-color: #fff;
  }
  /* .homepage-banner .offers-banner .button a {
        color: #000;
      } */
  .homepage-banner .offers-banner .offers-listing-container {
    -webkit-flex-direction: column;
    flex-direction: column;
    text-align: left;
    margin: 0 auto;
    flex-flow: wrap;
    align-self: flex-start;
    justify-content: center;
  }
  .homepage-banner .offers-banner .offers-listing-container .item {
    width: 100%;
    margin: 0px auto 3em;
  }
  .homepage-banner .offers-banner .offers-listing-container .item img {
    width: 50%;
  }
  .homepage-banner .offers-banner .offers-listing-container .item:nth-of-type(2n) {
    margin: 0px auto 3.5em;
  }
  .homepage-banner .offers-banner .offers-listing-container .item:last-of-type {
    margin: 0px auto;
  }
  .homepage-banner .offers-banner .offers-listing-container .item p {
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  .homepage-banner .offers-banner .offers-listing-container .item img {
    width: 56%;
  }
}

@media screen and (max-width: 479px) {
  .homepage-banner .offers-banner .offers-listing-container .item img {
    width: 60%;
  }
}

Answer 1

有两个问题：

不幸的是，IE9-IE11支持let，但不支持let的正确ES2015（“ ES6”）语义。特别是，他们不要为ES2015定义的每次循环创建新的i。

要支持IE，您必须使用the question linked in your question的答案中显示的其他解决方案之一，例如使用bind（IE9 +）：

document.addEventListener("DOMContentLoaded", function(event) {
  var rollOverCollectionA = document.getElementById("roll-over-collection-b").getElementsByClassName("rollover");
  rollOverCollectionA = Array.prototype.slice.apply(rollOverCollectionA);
  console.log("rollOverCollectionA", rollOverCollectionA);
  var l = rollOverCollectionA.length;
  for (var i = 0; i < l; i++) {
    //     ^^^
    on("mouseover", "#" + rollOverCollectionA[i].id, function() {
    console.log("mouseover " + this.id + " " + (typeof this.srcset));
      var srcObj = this.srcset.splice(171, 0, '-hover');
    // ------------^^^^
      srcObj.splice(362, 0, 'hover-')
      rollOver(this.id, srcObj);
      // ------^^^^
    }.bind(rollOverCollectionA[i]));
  // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    on("mouseout", "#" + rollOverCollectionA[i].id, function() {
    console.log("mouseout " + this.id + " " + (typeof this.srcset));
      // remove the hovers
      rollOut(this.id, this.srcset.replace('-hover', '').replace('hover-', ''));
      // -----^^^^-----^^^^
    }.bind(rollOverCollectionA[i]));
  // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  }
});

如果您不知道最新型号的IE具有不符合规范的let，则这是一个非常微妙的错误。我们通常希望关键字可以完全破坏脚本（如果不支持）或可以正常工作（如果受支持）。可悲的是，这里不是这样。

IE上不存在srcset属性，因为IE不支持srcset属性。您需要改为操纵src。（您仍然可以通过srcset和getAttribute来访问setAttribute属性作为属性，但是获取/设置的值是一个字符串，IE不会使用它。） / p>

IE11-变量超出范围，即使我为循环使用了“ let”

1 个答案: