它是这样的：单击图像，显示图像 - 使用jQuery

Question

简单吧？

基本上，这是概念。想象一下div＃images的所有子节点都是display：none默认值：

<div id=thumbs>
   <img src="thumb1.jpg"/>
   <img src="thumb2.jpg"/>
   <img src="thumb3.jpg"/>
</div>
<div id=images>
   <img src="img1.jpg"/>
   <img src="img2.jpg"/>
   <img src="img3.jpg"/>
</div>

这是我提出的逻辑：  单击div＃thumbs的子项，捕获子项＃，显示div＃images的相应子项＃。

我的问题：

• 如何返回元素的子编号onclick？ （在这种情况下，一个div）
• 注意我希望激活div＃thumbs
的子项

谢谢！

Answer 1

我假设你想在显示下一个之前隐藏前一个。

由于拇指与主图像的顺序相同，您可以这样做：

$('#thumbs > img').click(function() {
    $('#images > img').hide().eq( $(this).index() ).show();
});

或者像这样更有效率：

var main_images = $('#images > img');

$('#thumbs > img').click(function() {
    main_images.hide().eq( $(this).index() ).show();
});