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

Question

我想使用jQuery悬停方法在基础区域图像映射上方进行翻转，其中包含许多奇怪的形状，因此滚动每个精确的形状会触发图像交换，以及单独文本块中的.innerhtml交换。 我开始使用一个完全透明的占位符“零”图像，然后在翻转时交换到实时图像映射区域上方的png，然后在转出时返回到零图像。

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

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

这就像魅力一样，只要我明确声明每个悬停功能。 对于20张图片，会产生大量不必要的代码; 很明显，它会为数组和循环而尖叫。 因此......应该很容易填充两个数组：一个用于图像映射区域，另一个用于交换图像。 循环后的控制台记录给出了我的期望，但悬停功能不起作用。 因为我从来没有在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');
    });

};

});

Answer 1

发布时，您的悬停调用不在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');
    }
  );
});