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

Question

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

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

Answer 1

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

Answer 2

您正在 javascript 中选择第一张图片和缩略图。用作$(this)对选定元素的引用，如下所示...

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

$thumb是被点击的元素，而$(this)在fadeOut 回调中是被选中的图像元素。我怀疑类只有 1 个image，但这是使用$(this).