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