在当前的迭代中,我有它,如果用户点击图像缩略图,缩略图图像显示在不同的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” “等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', '');
});
});
答案 0 :(得分:1)
试试这段代码:
$('.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', '');
});
});
&#13;
直接在 .t_main_screenshot 课程上进行更新。所以它会更新所有地方,在这种情况下,你所有的模态.t_1,.t_2,......等等。
答案 1 :(得分:0)
$('a.screenshots_1').click(function() {
$('.t_main_screenshot img').find('img').attr('src' , "");
});
这将帮助您初始化模态屏幕截图图标上的主屏幕截图。