缩略图在Jquery中不显示正确的图像

Question

我在为网站创建照片库时遇到问题。图库的每个缩略图都显示第一个缩略图的图像。我使用的代码：

    $(".thumb").click(function() {
    $(".image").fadeOut(500, function() {
        $(".image").attr("src",$(".thumb").attr("href"));
    }).fadeIn(500);
    return false;
});

Answer 1

因为您正在使用$(".thumb").attr("href")，它将返回与该选择器匹配的第一个元素的值。

Answer 2

您正在javascript中选择第一个图片和thumnbnail。使用$(this)作为对所选元素的引用，如下所示......

$(".thumb").click(function() {
    var $thumb = $(this);
    $(".image").fadeOut(500, function() {
        $(this).attr("src",$thumb.attr("href"));
    }).fadeIn(500);
    return false;
});

$thumb是单击的元素，fadeOut回调中的$(this)是所选的图像元素。我怀疑班级image只有1个，但这是使用$(this)的另一个例子。