在懸停縮略圖上切換圖像？

Question

請看這個小提琴：http://jsfiddle.net/rabelais/e47xq/2/

我想顯示縮略圖上使用懸停時縮略圖的大圖像。以下是我的出發點。任何建議如何做到這一點？在我的最終版本中，可能會有20個縮略圖，所以我需要儘可能簡潔的代碼。

$(".thumnails").on("mouseover mouseout", "a", function() { 
$('#').toggle(); 
}); 

Answer 1

$(this).attr('href')獲取當前標籤href屬性。

$(".thumnails").on("mouseover mouseout", "a", function() { 
    $('#' + $(this).attr('href')).toggle(); 
}); 

和

設置第二圖像ID來image-2

Fiddle Demo

ID必須是唯一的。不要對多個元素使用相同的ID。

閱讀Two HTML elements with same id attribute: How bad is it really?

Answer 2

好，可能不是最好的整體解決方案，但考慮到你所擁有的，看看這個小提琴：http://jsfiddle.net/e47xq/1/

使用$(this).attr('href')錨元素來獲取你需要的選擇。