使用缩略图库切换多个图像

Question

我目前有一个使用onclick / jQuery / JavaScript的缩略图库，虽然一切正常但我认为让用户点击缩略图将其打开然后再次点击它会让人感到困惑关闭它，然后继续下一个。

我目前有8个缩略图/更大的图片，我用不同的ID输入了8次这个代码：

function toggle_visibility(chLoTog) {
    var e = document.getElementById(chLoTog);
    if(e.style.display == 'block')
    e.style.display = 'none';
    else
    e.style.display = 'block';
}

---

我是jQuery的新手，我打赌有一种方法可以不必输入8次代码。我真正想要的代码是：

1. 点击缩略图并显示相关图片
2. 点击另一个隐藏当前缩略图并显示新缩略图的缩略图
3. 能够以随机顺序进行此操作。

我希望这一切都有道理。

Answer 1

您可以使用缩略图上的类和数据属性来实现非常简单的jquery，即

// HTML
// Add a class and a data attribute to the gallery thumbnal image
<img class="gallery-thumbnail" src="path/to/gallery-thumbnail.jpg" data-img="path/to/gallery-image.jpg" />

// jquery
// Bind a click function to each thumbnail image
$('.gallery-thumbnail').click(function(){
    // Hide all the currently showing gallery images
    $('.gallery-image').hide();

    // Get the id of the requested gallery image
    var id = '#' + $(this).attr('data-imge');

    // Show the requested gallery image
    $(id).show();
}):

您甚至可以将点击功能绑定到每个图库图像，以便用户可以通过单击图像本身来隐藏它们，即

// Hide gallery image when clicked
$('.gallery-image').click(function(){
    $(this).hide();
});