Question

作为练习，我试图在Javascript中创建一个hoverzoom脚本，而不是诉诸jQuery。该脚本将页面上的所有<a>链接放在一个数组中，然后搜索扩展名为href的{{1}}并对其应用hoverzoom函数

我非常接近让它发挥作用。该函数适用于jpg文件名以jpg结尾的实例，但当它以不同的代码结束时代码中断。这是有问题的代码：

<a>

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

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

编辑：道歉，忘了指定一个问题。如何将脚本更改为仅在源扩展名与.jpg匹配时才起作用，并在扩展名不匹配时不执行任何操作？

Answer 1

您需要将事件绑定移动到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]不会总是。将事件绑定移动到if语句并重新排列保证扩展名为“jpg”，因此将事件绑定到现有项目，然后将其推送到aImages

Answer 2

你的问题是你为你的循环索引的方式：你应该使用单独的循环来创建aImages数组然后循环它：这样的东西应该工作：

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

for (var i = 0; i < aImages.length; i++) {
    aImages[i].onmouseover = function() {
        hoverZoom(this);
    }
    aImages[i].onmouseout = function() {
        refresh(this);
    }
}

否则非图像链接会使您的索引失去同步

Answer 3

当函数遇到非jpg文件时，它将跳过if块，但会尝试在aImages数组中找到该链接。这会打破代码。

你应该写一个不同的for循环，或者更好的方法是绑定if块中的事件。

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

3 个答案: