javascript - 尝试仅在源为 jpg 时加载函数

Question

作为练习，我尝试在 Javascript 中制作一个悬停缩放脚本，而不求助于 jQuery。该脚本将所有 <a>数组中页面上的链接，然后搜索 href扩展名为jpg并向其应用悬停缩放功能

我已经非常接近让它发挥作用了。该函数适用于 <a> 的实例。文件名确实以 jpg 结尾，但是当它以不同的内容结尾时，代码就会中断。这是有问题的代码:

for (var i = 0; i < aLinks.length; i++) {
    aExtensions[i] = aLinks[i].href.split('.').pop();
    if (aExtensions[i].toLowerCase() == 'jpg') {
        aImages.push(aLinks[i]);
    }
    aImages[i].onmouseover = function() {
        hoverZoom(this);
    }
    aImages[i].onmouseout = function() {
        refresh(this);
    }
}

完整脚本和实时版本在这里:http://james.is.agoodman.com.au/git/js_hoverZoom/

正如您在现场演示中所看到的，它适用于两个图像链接，在第三个非图像链接上中断，然后后续图像链接也不起作用。

编辑:抱歉，忘记指定问题。如何将脚本更改为仅在源扩展名匹配 .jpg 时才起作用，而在扩展名不匹配时不执行任何操作？

Answer 1

您需要将事件绑定(bind)移至 if 语句中:

for (var i = 0; i < aLinks.length; i++) {
    aExtensions[i] = aLinks[i].href.split('.').pop();
    if (aExtensions[i].toLowerCase() == 'jpg') {
        aLinks[i].onmouseover = function() {
            hoverZoom(this);
        };
        aLinks[i].onmouseout = function() {
            refresh(this);
        };
        aImages.push(aLinks[i]);
    }
}

您并不总是将项目推送到aImages数组，因此aImages[i]不会总是 成为某种东西。将事件绑定(bind)移动到 if 语句中并重新排列可保证扩展名是“jpg”，因此将事件绑定(bind)到现有项目，然后将其推送到 aImages