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

Question

我想使用jQuery的hover方法来实现基于多个奇形怪状的基础图像映射的悬停效果，以便在每个精确的形状上滚动时触发图像交换，以及在单独的文本块中进行.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');
    });

};

});

- boomturn

---

抱歉，我发布了错误的代码，悬停在循环中像上面一样。 - boomturn

Answer 1

如您所述，您的hover调用不在for循环中，因此仅对i = 21运行。

编辑：我要扩展这个并提出一个不同的方法：首先遍历所有区域地图并使用jQuery的“data”调用添加一些信息到它们上面。这样您就可以为所有区域地图分配相同的hover函数。

示例：

$(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');
    }
  );
});

- Elliot Nelson