在缩略图悬停时切换图像？

Question

请看这个小提琴：http://jsfiddle.net/rabelais/e47xq/2/

我希望在缩略图上使用悬停时显示缩略图的大图像。以下是我的出发点。有什么建议怎么做？在我的最终版本中，可能有20个缩略图，所以我需要尽可能简洁的代码。

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

Answer 1

嗯，可能不是最好的整体解决方案，但考虑到你拥有的，请检查这个小提琴：http://jsfiddle.net/e47xq/1/

在anchor元素上使用$(this).attr('href')来检索所需的选择器。

Answer 2

.attr()

$(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?