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

作为练习，我尝试在Javascript中创建一个hoverzoom脚本，而不使用jQuery。脚本将所有

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

编辑：抱歉，忘记指定问题。如何将脚本更改为仅在源扩展名与.jpg匹配时运行，而在扩展名不匹配时不执行任何操作？
当函数遇到非jpg文件时，它将跳过if块，但将尝试在aImages数组中查找该链接。这会破坏密码

您应该编写不同的for循环，或者更好的方法是绑定if块中的事件。
当函数遇到非jpg文件时，它将跳过if块，但将尝试在aImages数组中查找该链接。这会破坏密码

您应该编写一个不同的for循环，或者更好的方法是在if块中绑定事件。
您的问题在于索引循环的方式：您应该使用单独的循环来创建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);
    }
}

for（变量i=0；i

否则，非图像链接会使您的索引失去同步
您的问题在于索引循环的方式：您应该使用单独的循环来创建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);
    }
}

for（变量i=0；i

否则，非图像链接会使索引失去同步
您需要将事件绑定移动到
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]);
    }
}

for（变量i=0；i

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

for（变量i=0；i

您并不总是将项目推送到
aImages
数组中，因此
aImages[i]
并不总是很重要。将事件绑定移动到
if
语句中并重新排列可确保扩展名为“jpg”，因此将事件绑定到现有项，然后将其推送到
aImages
，问题是？你确定推到一个数组，然后在循环中使用该数组来附加事件处理程序是个好主意。我认为你需要将事件绑定放到
if
语句中…你没有基于
if
语句绑定事件-你总是访问
aImages[I]
，可能是，也可能不是set@adeneo这是个坏主意吗？我对Javascript非常陌生，所以请原谅这些明显的错误。问题是？你确定推到一个数组，然后在循环中使用该数组来附加事件处理程序是个好主意。我认为你需要将事件绑定放到
if
语句中…你没有基于
if
语句绑定事件-你总是访问
aImages[I]
，可能是，也可能不是set@adeneo这是个坏主意吗？我对Javascript非常陌生，所以请原谅这些明显的错误。如果它不总是将图像推送到数组中，索引将关闭，并且与数组的内容不匹配。@adeneo重新阅读我的答案。直到事件绑定之后，我才将该项推送到数组中或引用它。我引用原始的
aLinks
array项进行事件绑定，然后将该项推到
aImages
Smart move中，一开始并没有真正看到它不@adeneo没问题，我意识到简单地将事件绑定移动到
for
循环中会产生您提到的问题，因此需要额外的重新安排来解决这个问题，如果它不总是将图像推送到数组中，索引将关闭，并且与数组的内容不匹配。@adeneo重新阅读我的答案。直到事件绑定之后，我才将该项推送到数组中或引用它。我引用原始的
aLinks
array项进行事件绑定，然后将该项推到
aImages
Smart move中，一开始并没有真正看到它不@没有问题，我意识到只要将事件绑定移动到
for
循环中就会产生您提到的问题，因此需要进行额外的重新安排来解决这个问题