javascript - 摆脱内联 JS

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 7 年前。

Improve this question

我一直在制作一个带有一些图像比较的网站，并且我已经暂时“修复”了一些内联 JS 的问题。然而，比较的数量增加了，并且由于内联 JS 并不是很好或不专业，我想问将下面的摘录转换为单独的 JS 文件的最佳方法是什么:

<a href="" onclick="return false;" onmouseover="document.Comp01.src='images/img2.jpg';" onmouseout="document.Comp01.src='images/img1.jpg';">
<img src="images/img1.jpg" name="Comp01"/></a>

<a href="" onclick="return false;" onmouseover="document.Comp02.src='images/img4.jpg';" onmouseout="document.Comp02.src='images/img3.jpg';">
<img src="images/img3.jpg" name="Comp02"/></a>

提前致谢。

Answer 1

您可以完全删除 a 标签，并将翻转图像添加到每个图像标签的 data-img2 属性中。在这些更改之后，这个 javascript 应该可以解决问题:

function switchImage() {
  var tmp = this.getAttribute('data-img2');
  this.setAttribute('data-img2', this.src);
  this.src = tmp;
}

var imgs = document.querySelectorAll('img');

for (var i = 0; i < imgs.length; i++) {  
  imgs[i].addEventListener('mouseover', switchImage, false);
  imgs[i].addEventListener('mouseout', switchImage, false);
}

<img src="http://65.media.tumblr.com/tumblr_lvt3icqzzk1r2h6ioo1_500.jpg" data-img2="http://65.media.tumblr.com/6e84c41199dd134d22f5ce0f1dcbaadc/tumblr_nbm3wsXhRV1r2h6ioo1_500.jpg" />
<img src="http://66.media.tumblr.com/dc23e90fc500f0e48fa0108be589008b/tumblr_nbdb2mta9K1r2h6ioo1_500.jpg" data-img2="http://67.media.tumblr.com/ba9ceeab05ddf1e9825f97f37629965d/tumblr_mtg3fpQd6N1r2h6ioo1_500.jpg" />

只需确保在 body.onload 中或 html 底部运行它即可。