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;
    });
});

在简单的jQuery库中关闭并恢复原始图像？

1 个答案: