如何使用jquery函数从动态id更改图库缩略图？

Question

我一直在尝试为我的网站创建一个画廊，但无法解决使用动态 ID 中的大缩略图更改缩略图的问题。

这是我想做的：

我有两个独立的无序列表。第一个拿着大图片，第二个拿着拇指。两个列表项具有相同的 ID 号，但 ID 名称不同。大图片的 id 为preview-1、preview-2 等，缩略图的 id 为thumbnail-1、thumbnail-2 等。

我想当用户点击它时更改具有相同id号的大缩略图。

例如：如果我单击 id="thumbnail-3"，则大图像 id="preview-3" 应在当前大图像淡出后立即淡入。

这是我的示例 HTML

<ul class="previews">
<li id="preview-10"><a class="gallery product_2 jqzoom" href="foto1_lg.jpg"><img width="314" height="450" src="foto1.jpg"></a></li>
<li id="preview-11"><a class="gallery product_2 jqzoom" href="foto2_lg.jpg"><img width="314" height="450" src="foto2.jpg"></a></li>
<li id="preview-12"><a class="gallery product_2 jqzoom" href="foto3_lg.jpg"><img width="314" height="450" src="foto3.jpg"></a></li>
<li id="preview-13"><a class="gallery product_2 jqzoom" href="foto4_lg.jpg"><img width="314" height="450" src="foto4.jpg"></a></li>
<li id="preview-14"><a class="gallery product_2 jqzoom" href="foto5_lg.jpg"><img width="314" height="450" src="foto5.jpg"></a></li>
<li id="preview-15"><a class="gallery product_2 jqzoom" href="foto6_lg.jpg"><img width="314" height="450" src="foto6.jpg"></a></li>

这是大图像框

和..

<ul class="thumbnails">
<li id="thumbnail-10"><img width="70" height="70" src="tn1.jpg"></li>
<li id="thumbnail-11"><img width="70" height="70" src="tn2.jpg"></li>
<li id="thumbnail-12"><img width="70" height="70" src="tn3.jpg"></li>
<li id="thumbnail-13"><img width="70" height="70" src="tn4.jpg"></li>
<li id="thumbnail-14"><img width="70" height="70" src="tn5.jpg"></li>
<li id="thumbnail-15"><img width="70" height="70" src="tn6.jpg"></li>

这是缩略图框。

我希望你们能在这件事上帮助我。

谢谢！

已更新

顺便问一下，是否有机会将 .current 类添加到所选缩略图中？当用户点击时，之前选择的应该消失？

Answer 1

如果两个列表的顺序相同，我的意思是缩略图及其相应的预览位于列表中的同一位置，那么即使根本不使用这些 id 也可以解决您的问题。

使用 id 的解决方案

$('ul.thumbnails > li').click(function() {
    var preview_id = 'preview-' + $(this).attr('id').split('-')[1];

    $('ul.previews > li:visible').fadeOut('normal', function() {
            $('#'+preview_id).fadeIn();
    }); 
});

不使用 id

$('ul.thumbnails > li').click(function() {
    var thumb_number = $(this).index();

    $('ul.previews > li:visible').fadeOut('normal', function() {
            $('ul.previews > li').eq(thumb_number).fadeIn();
    }); 
});

两种解决方案都意味着一次始终至少有一个预览可见。否则不会调用 fadeIn 函数。