通过javascript更改internet explorer中的图像src

我上一篇文章的后续内容：

我想把这篇文章放在它自己的主题里，这样其他人会发现它更容易，如果是重复的，我道歉。在我之前的帖子中，一个叫Ryan的家伙为我的问题提供了一个解决方案，当时这个解决方案不起作用，虽然我很累，但已经很晚了，也许我错过了什么。无论如何，他建议我在按下每个按钮的情况下更改图像src，而不是一开始加载所有图像，这是一个更优雅的解决方案。他提供了这个密码

<ul class='imageMenu'>
  <li data-image="dog.jpg">dog</li>
  <li data-image="cat.jpg">cat</li>
  <li data-image="donkey.jpg">donkey</li>
</ul>
<img src="" id='selectedImage' />
<script>
  const img = document.querySelector('#selectedImage');
  document.querySelectorAll('.imageMenu li').forEach(item => {
    item.addEventListener('click', evt => {
      img.setAttribute('src', evt.target.getAttribute('data-image'));
    });
  });
</script>

狗
cat
驴子

const img=document.querySelector（“#selectedImage”）；
document.querySelectorAll（'.imageMenu li'）.forEach（item=>{
item.addEventListener（'click'，evt=>{
img.setAttribute（'src'，evt.target.getAttribute（'data-image'）；
});
});

---

现在，随着时间的推移和睡眠的恢复，我让它工作了，除了在internet explorer中。我的问题是，是否有一些代码需要为internet explorer添加，比如说“如果在internet explorer中运行此代码，请改为”的if语句？再一次，如果我是多余的，我很抱歉，我只是迷路了，而且记录在案，Internet Explorer是我存在的祸根，这是我不得不重新编码页面的全部原因。不管怎样，如果您有任何建议，我们将不胜感激。谢谢，Black_Lightning

首先

const

和arrow函数是ECMAScript 6的功能，在IE 8中不受支持，因此您应该使用

var

而不使用arrow函数

接下来，IE 8中也不支持

.forEach（）

和

.querySelectorAll（）

但是，最重要的一点是IE 8不支持

。addEventListener（）

作为将回调函数绑定到事件的方法，它使用专有的

现在，我们不想检查IE本身，我们只需要知道我们想要使用的功能是否可用，这就是所谓的

您应该清楚地意识到，是一个很好的资源，可以检查哪里支持什么

请参见下面的跨浏览器版本：

//IE 8不支持.forEach、.queryselectoral或.addEventListener
var img=document.getElementById（'selectedImage'）；
var menu=document.getElementById（'imageMenu'）；
对于（变量i=0；i元素：
if（menu.childNodes[i].nodeName==“LI”）{
//检查是否支持addEventListener
if（window.addEventListener）{
//符合标准的现代浏览器
menu.childNodes[i].addEventListener（'click'，函数（evt）{
img.setAttribute（'src'，evt.target.getAttribute（“数据图像”）；
//试验
console.log（img.src）；
});
}否则{
//IE 8或以下
menu.childNodes[i].attachEvent（“onclick”，函数（evt）{
evt=evt | | window.event；
setAttribute（'src'，evt.srcmelement.getAttribute（“数据图像”）；
//试验
console.log（img.src）；
});
}
}
}

狗
cat
驴子

我发现了一些简单有效的方法！这只是几行简单易懂的代码！再次感谢所有在这里和在我之前的职位上提供帮助的人

<script type="text/javascript">
  function change_pic(p) {
  document.images._pimg.src = p;
  // alert('test');
}
</script>

<img name="_pimg" src="image.jpg" >

<a href="javascript:;" onclick="change_pic('image.jpg')">image</a>
<a href="javascript:;" onclick="change_pic('image2.jpg')">image 2</a>

功能改变图（p）{
document.images.\u pimg.src=p；
//警报（“测试”）；
}

你在说什么版本的IE？在IE中会出现什么错误？我使用IE 8（8.0.7601.17514）。我从来没有在控制台中看到任何错误。好了，就这样。IE8不再被广泛使用，但不幸的是它不符合标准。只是好奇，你为什么还在IE8上？请参阅下面我的更新答案。每次我执行windows update时，我的电脑都会坏掉，因此我发誓再也不会更新了。我发誓Microsoft比我遇到的任何病毒都要致命——至少是那些我先清除驱动器，然后进行Acronis恢复的病毒，一切都很好。更不用说，如果我在IE8上，其他人可能也会这样，所以它给了我一个很好的基线，如果它在我的机器上工作，它也会在其他人的机器上工作，我希望能够接触到最广泛的受众。我只是不知道为什么我在以前的线程中发布的草率JavaScript能够工作，而不是更优雅的解决方案。如果我能加载我的头像，我也很乐意使用我的头像。据统计，IE8被不到1%的网络用户使用。这是微软对任何网络标准做出承诺之前IE的最后一个版本。因此，在考虑开发兼容性时，几乎没有考虑到这一点。事实上，大多数网站只考虑与IE 10或UP兼容。有一些专有的“内部”应用程序可能仍然需要它，但对于公众来说，我们不再编写与之兼容的代码。谢谢。就像Ryan的代码一样，它似乎在除IE之外的所有环境中都能工作，它给出的错误是指向这一行的语法错误；liArray.forEach（item=>{我一直希望/祈祷它能起作用。我会继续努力让它起作用，所以如果我不立即回复，这就是原因。我运行了你的新代码片段，它给了字符16一个错误“object required”（我的计算将它带到分号后面的I:

）（var i=0；i

我现在真的很讨厌ie！Grrr！我已经在ie中测试了在ie 8仿真模式下运行的代码，它工作正常（见上图）。如果它不适用于您，则您不能在关闭

正文

标记之前放置脚本代码，也不能在设置代码时发生其他错误。

名称

属性在非表单元素上无效。它应该是

id

，如果您更改它，则行可以是：