Question

寻找一些方向。

在当前的迭代中，我有它，如果用户点击图像缩略图，缩略图图像显示在不同的div（主div），并且这样做，它重写主div img src attr *更新：使用缩略图img attr减去“-thumbnail”。这部分很好，或者至少我相信它是。

话虽如此，在用户点击缩略图并显示主div img之后，它仍然存在...而且我的意思是，例如，如果用户关闭div并重新打开它或另一个div就像它一样，最后一张图像显示（停留）它不应该在主div中。相反，它应该显示主div中的第一个缩略图img

任何建议都值得赞赏，以下是我目前拥有的建议（或至少是其中的一部分）。还有更多，但下面是给我带来麻烦的主要东西......

* update ：HTML部分位于名为“t_1”的div类中。我有24个......“t_1”，“t_2”，“t_3”。在这个课程中，我使用相同的div类在下面发布了所有内容。唯一的区别是img标签中的文件夹名称。

因此，当用户点击该缩略图并重写该缩略图图像以便它可以显示在主div“t_main_screenshot”中时，一切都很好......但是，如果用户点击了“t_1” “等divs，并打开另一个”t_2“，之前点击的最后一个图像缩略图显示在主div（t_main_screenshot）而不是第一个图像缩略图中，应该是”t_2“......

希望这在清晰度方面要好一些......这很难解释。

HTML：

<div class="t_main_screenshot">
    <img src="_framework/images/slides/simplicity/2.png" alt="" title="" />
</div>

<div class="t_thumbnail_wrapper">
    <div class="t_thumbnail active">
        <img src="_framework/images/slides/simplicity/2-thumbnail.png" alt="" title="" />
    </div>
    <div class="t_thumbnail">
        <img src="_framework/images/slides/simplicity/4-thumbnail.png" alt="" title="" />
    </div>
    <div class="t_thumbnail">
        <img src="_framework/images/slides/simplicity/6-thumbnail.png" alt="" title="" />
    </div>
</div>

JS / JQuery：

$('.t_thumbnail').click(function() {
    $('.t_thumbnail').removeClass('active');
    $(this).addClass('active');

    var thumbNail = $(this).find('img').attr('src');

    $('.t_main_screenshot img').fadeOut(0, function() {
        $(this).fadeIn().css('animation','scale-in .75s ease-in 0s forwards')[0].src = thumbNail.replace('-thumbnail', '');
    });
});

Answer 1

您的问题不明确，但我认为您的意思是当用户点击两次这么快时，您会看到一个闪光灯......

那是因为您使用的是.fadeOut()和.fadeIn()

因此，要解决此问题，您可以使用.stop()方法在开始新动画之前停止上一个动画

更多详情：https://api.jquery.com/stop/

根据问题更新

问题在于：$('.t_main_screenshot img').fadeOut(0, function() {

您必须选择最接近的t_main_screenshot

正确的方式：

$(this).closest('.t_thumbnail_wrapper')
       .siblings('.t_main_screenshot')
       .find('img').fadeOut(0

让我知道这是否有效......

Answer 2

$('.t_thumbnail').click(function() {
    $('.t_thumbnail').removeClass('active');
    $(this).addClass('active');

    var thumbNail = $(this).find('img').attr('src');
    var res = thumbNail.substring(1, thumbNail.indexOf("-"));
    res+=".jpg";

    $('.t_main_screenshot img').fadeOut(0, function() {
        $(this).fadeIn().css('animation','scale-in .75s ease-in 0s forwards')[0].src = res;
    });
});

Answer 3

最后想出了答案：

$('.t_thumbnail').click(function() {
    $('.t_thumbnail').removeClass('active');
    $(this).addClass('active');

    var thumbNail = $(this).find('img').attr('src');

    $(this).parent().parent().siblings().find('.t_main_screenshot').children('img').fadeOut(0, function() {
        $(this).fadeIn().css('animation','scale-in .75s ease-in 0s forwards')[0].src = thumbNail.replace('-thumbnail', '');
    });
});

更改图像src attr

3 个答案: