jquery - 在一个简单的 jQuery 库中关闭并恢复为原始图像？

Question

我正在使用Papermashup.com的简单 jQuery 库，需要帮助扩展它的功能。我目前有 4 个缩略图和 1 个主图像。但是，我希望能够恢复到原始图像，而无需原始图像的额外缩略图。如果以及当您单击另一个缩略图时，是否可以恢复为原始状态？

HTML：

<div class="main"><img src="main.jpg"></div>

<div class="thumbs">
   <a class="t" href="main-lrg.jpg" rel="1"><img src="main-1.jpg"></a>
   <a class="t" href="main-lrg.jpg" rel="2"><img src="main-1.jpg"></a>
   <a class="t" href="main-lrg.jpg" rel="3"><img src="main-1.jpg"></a>
   <a class="t" href="main-lrg.jpg" rel="4"><img src="main-1.jpg"></a>
</div>

JS：

$(function() {
    $('.t').click(function() {
        var image = $(this).attr('rel');
        $('.main').hide();
        $('.main').fadeIn('fast');
        $('.main').html('<img src="' + image + '">');
        return false;
    });
});

Answer 1

在 DOM 加载时获取原始图像src属性，以便您对其进行引用。然后，当您想再次显示原始图像时，您只需将主图像的src属性设置回原始图像即可。例如，如果你有一个 ID 为“close”的按钮，它应该显示原始图像，它看起来像这样：

$(function() {
    var original = $('.main img').attr('src');

    $('#close').click(function() {
        $('.main img').attr('src', original);
        $(this).hide();
    });

    $('.t').click(function() {
        var image = $(this).attr('rel');
        $('.main').hide();
        $('.main').fadeIn('fast');
        $('.main').html('<img src="' + image + '">');
        $('#close').show();
        return false;
    });
});