如何使用 jquery 函数从动态 id 更改画廊缩略图？答案

【问题标题】：How to change the gallery thumbnails from the dynamic id by using jquery function?如何使用 jquery 函数从动态 id 更改画廊缩略图？
【发布时间】：2011-03-10 07:09:10
【问题描述】：

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

这是我想做的：

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

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

例如：如果我点击 id="thumbnail-3" 那么大的 img 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 类添加到选定的缩略图中？当用户点击时，之前选择的应该会消失吗？

【问题讨论】：

标签： jquery dynamic jquery-selectors gallery image-gallery

【解决方案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函数将不会被调用。

【讨论】：