更改 img src attr 问题

Question

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

话虽如此，在用户单击缩略图并出现主 div img 后，它会徘徊......我所说的徘徊是指，例如，如果用户关闭 div 并重新打开它或其他div 就像它一样，最后一张图片显示（停留）它不应该在主 div 中。相反，它应该在主 div 中显示第一个缩略图 img...

感谢任何建议，以下是我目前拥有的（或至少一部分）。还有很多，但下面是给我带来麻烦的主要内容......

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

因此，当用户单击该缩略图并且该缩略图图像被重写以使其可以显示在主 div“t_main_screenshot”中时，一切都很好......但是，如果用户单击“t_1 " 等 div，并打开另一个 "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

$('a.screenshots_1').click(function() {
    $('.t_main_screenshot img').find('img').attr('src' , "");
});

这将帮助您在模态屏幕截图图标单击时初始化主屏幕截图。

Answer 2

试试这个代码：

$('.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', '');
	});
});

当您直接在 .t_main_screenshot 类上进行更新时。所以它会更新所有的地方，在这种情况下是你所有的模态 .t_1, .t_2, ...等。