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底部运行它。

Answer 2

首先，你从我那里得到+1，因为你问如何变得更好。

我的回答是进化的。

您不需要锚（标签）。尝试将onmouseover / out放在img-tag上。
您可以获取getElementByName或类似的元素，并附加一个事件监听器来做同样的事情。
下一步可能是定义更通用的逻辑。像：

＆＃13;

        var matches = document.querySelectorAll("img[data-mouseover]");
        var i;
        for (i = 0; i < matches.length; i++) {
            var el = matches[i];
            var srcimg = el.src;
            el.addEventListener('mouseout', function() {
                el.src = srcimg;
            });
            el.addEventListener('mouseover', function() {
                el.src = el.dataset.mouseover;
            });
        }

＆＃13;

<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" data-mouseover="https://pixabay.com/static/uploads/photo/2013/07/12/12/58/tv-test-pattern-146649_960_720.png" />

＆＃13;

接下来可能是使用框架。我喜欢AngularJS。 Angular的方法是为它制作一个directive。对于初学者来说，Angular有点复杂，但从我的观点来看，Web应该如何工作。或者，您可以尝试使用jQuery或prototype.js来提高浏览器兼容性，减少代码。

P.S。哇，我的第一个片段：）

摆脱内联JS

2 个答案: