Well, IDs are supposed to be *unique* on the page, which you do not
have
your selector would be better off like
$("span.box").click(....)
On Apr 1, 5:16 am, thalis <tkalf...@gmail.com> wrote:
> Hi all,
>
> I have 3 images. I want one of them to be displayed, and when user
> clicks either on <span>1</span> or <span>2</span> to swap the
> displayed image with the clicked one.
>
> Here is my (semi-functional) shot at it:
> $(document).ready( function() {
> $('#altImg').click( function(){
> var mainImgSrc=$('img#mainImg').attr('src');
> $('img#mainImg').attr('src',$(this).attr('src'));
> $(this).attr('src',mainImgSrc);
> return false;
> });
>
> });
>
> <img id="mainImg" class='box' src='images/avatar.png'/>
> ...
> <span class="box" id="altImg" src="images/avatar1.png">1</span>
> <span class="box" id="altImg" src="images/avatar2.png">2</span>
>
> It works only for the first span (i.e. successful back & forth
> swapping of displayed and <span> image). The second <span> is immune
> to clicking. Any reason why my click() binds only to the first and not
> all occurrences of #altImg ?
>
> TIA,
> --thalis
>
> ps. I swaped the positions of the <span>'s and still only binds to the
> first occurrence
