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

Question

我想使用 jQuery 悬停方法在包含许多奇怪形状的基本区域图像 map 上方滚动，以便在每个确切形状上滚动会触发图像交换，以及单独文本 block 中的 .innerhtml 交换。我从一个完全透明的占位符“零”图像开始，然后在鼠标悬停时切换到实时图像 map 区域上方的 png，然后在推出时返回到零图像。

因此，一个区域 map 区域的代码如下所示。这里areamapImage1对应的是base image的一个坐标区域。

$('#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 时运行。

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

例子:

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