0

我目前有一个使用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. 为了能够以随机顺序进行。

我希望这一切都有意义。

4

1 回答 1

0

您可以使用缩略图上的类和数据属性使用 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();
});
于 2013-02-28T21:06:39.317 回答