0

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

我非常接近让它工作。该函数适用于<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 时才起作用，而在扩展名不匹配时不执行任何操作？

4

3 回答 3

3

您需要将事件绑定移动到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]);
    }
}

You aren't always pushing an item to the aImages array, so aImages[i] won't always be something. Moving the event bindings into the if statement and rearranging guarantees that the extension is "jpg", and therefore binds an event to an existing item, then pushes it into aImages

于 2012-12-18T09:47:07.007 回答
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);
    }
}

否则，非图像链接会使您的索引不同步

于 2012-12-18T09:47:02.603 回答
1

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

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

于 2012-12-18T09:46:24.430 回答