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