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

Question

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

这里是我想做的事情：

我有两个分开的无序名单。第一张拿着大照片，第二张拿着拇指。两个列表项都有相同的标识号，但id名称不同。大图片的id是预览-1，预览-2等等，而缩略图的id是缩略图-1，缩略图-2等等。

当用户单击缩略图时，我想用相同的id号更改缩略图。

例如:如果我点击id=“缩略图-3”，那么大型img id=“预览-3”应该会在当前大图像消失后立即消失。

这里是我的示例

<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>

​

这是缩略图盒。

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

谢谢!

更新

顺便问一下，是否有机会将

类添加到选定的缩略图中？当用户单击？

时，先前选择的选项应该消失。

Answer 1

如果两个列表的顺序相同，我的意思是缩略图，它对应的预览在列表中的位置相同，那么即使不使用这些ids，您的问题也可以得到解决。

使用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函数。