It goes like this: Click an image, show an image - using jQuery

Simple right?

Basically, here is the concept. Imagine all children of div#images are display:none by default:

<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>

Here's the logic I've come up with: Click a child of div#thumbs, capture the child #, show the corresponding child # of div#images.

Questions I have:

• How do I return the child number of an element onclick? (In this case, a div)
• Note I want this to be activated onclick of children of div#thumbs

Thanks!

I assume you want to hide the previous one before displaying the next.

Since the thumbs are in the same order as the main images, you could do this:

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

or a little more efficient like this:

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

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