它是这样的:单击图像,显示图像 - 使用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();
});