Javascript JQuery悬停、图像映射、循环和数组

我想使用jQuery hover方法在包含许多奇数形状的基本区域图像映射上进行滚动，这样滚动每个精确形状会触发图像交换，以及单独文本块中的.innerhtml交换。我从一个完全透明的占位符“zero”图像开始，然后在滚动时切换到live image map区域上方的png，然后在滚动时切换回zero图像

因此，一个区域地图区域的代码如下所示。此处，areamapImage1对应于基础图像的坐标区域

$('#areamapImage1').hover(
    function() {
        $('#imageSwap').attr('src','images/image1.png');
    },
    function() {
        $('#imageSwap').attr('src','images/image0.png');
});

只要我明确声明每个悬停函数，这就像一个符咒。对于20幅图像，这会产生大量不必要的代码；显然，它需要数组和循环。所以填充两个数组应该很简单：一个用于图像映射区域，另一个用于交换图像。循环后的控制台日志记录给出了我所期望的结果，但是hover函数不起作用。由于我从来没有在JS中做过很多事情，我强烈怀疑这里有一个脑死操作符错误，可能是由于JS/jQuery语法或范围。就我所知，这些变量应该可以用于悬停函数（？）。两个数组都返回字符串。jQuery有一种语法，它将选择器放在单引号中；当我尝试设置imageArea数组以显式包含引号时，悬停抛出了一个非常奇怪的语法错误，因此我假设jQuery只使用常规字符串

谢谢你的建议

$(document).ready(function() {

    // image preload
    var imageSource = []; 
    imageSource[0] = 'images/image0.png'  //load 0 position with "empty" png
    var imageAreas = [];

    // area map and image array fill
    for (var i=1; i<21; i++) {
        imageSource[i] = 'images/image' + i + '.png'; // 
        imageAreas[i] = '#areamap_Image' + i;

    $(imageAreas[i]).hover(   // hover function

        function() {
            $('#imageSwap').attr('src',imageSource[i]); 
        },
        function() {
            $('#imageSwap').attr('src','images/image0.png');
    });

};

});

$（文档）.ready（函数（）{
//图像预加载
var imageSource=[]；
imageSource[0]=“images/image0.png”//加载0个位置，其中包含“空”png
var imageAreas=[]；
//面积图和图像阵列填充
对于（var i=1；i，您的悬停调用不在for循环中，因此它只在i=21时运行

编辑：我将对此进行扩展，并实际提出一种不同的方法：首先循环遍历所有区域地图，并使用jQuery的“数据”调用向它们添加一些信息。这样，您就可以为所有区域地图分配相同的悬停函数

例如：

$(document).ready(function() {
  for(var i = 1; i < 21; i++) {
    $('#areamap_Image' + i).data('rolloverImage', 'images/image' + i + '.png');
  }

  // Replace 'area' with a more specific selector if necessary
  $('area').hover(
    function() {
      $('#imageSwap').attr('src', $(this).data('rolloverImage'));
    },
    function() {
      $('#imageSwap').attr('src', 'images/image0.png');
    }
  );
});

$（文档）.ready（函数（）{
对于（变量i=1；i<21；i++）{
$（'areamap'u Image'+i）.data（'rolloverImage'，'images/Image'+i+'.png'）；
}
//如有必要，用更具体的选择器替换“区域”
$（“区域”）。悬停(
函数（）{
$（'#imageSwap'）.attr（'src'，$（this.data（'rolloverImage'））；
},
函数（）{
$（'#imageSwap'）.attr（'src'，'images/image0.png'）；
}
);
});
抱歉，发布了错误的代码，悬停在循环中，如上所述。