Question

I am trying to create a click event via jQuery

Here is the HTML code

<div class="wpcart_gallery" style="text-align:center; padding-top:5px;">

<a class="thickbox cboxElement"  href="0037.jpg" rev=" 0037.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" src="0037-50x50.jpg">
</a>

<a class="thickbox cboxElement"  href="0038.jpg" rev=" 0038.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" src="0038-50x50.jpg">
</a>

<a class="thickbox cboxElement"  href="0039.jpg" rev=" 0039.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" src="0039-50x50.jpg">
</a>

</div>

Notice that the class names of the image links are called thickbox cboxElement. When the page loads the class cboxElement is removed from the first image inside the div, what I am trying to do is when the user clicks on any of the images to remove the class name cboxElement from that image link and add the class cboxElement to the other images links.

<script type="text/javascript">
    jQuery('document').ready(function($){
         $(".wpcart_gallery a:first").removeClass("cboxElement");
         jQuery(".wpcart_gallery img").click(function($){
             jQuery(".wpcart_gallery a").removeClass('cboxElement').siblings().addClass('cboxElement');
        });
    });
</script>

The code above works…sorta. It removes the class name cboxElement from the first image link, but the click event is not working, when I goto click on any of the images it adds the class cboxElement to all of the image links.

What I am looking to do is add the class cboxElement to all the image links except the one that got clicked on.

I got no errors in my error console for the jQuery code, the jquery.js file is in the header and is working.

Here is an example…notice the 3 images below the big image. http://www.taranmarlowjewelry.com/products-page/rings/product-1-2/

Answer 1

When you do a

 jQuery(".wpcart_gallery a")

you will get the list of all tags in the div, and not the one you clicked. So when first removing the class and then adding it to all the siblings means:

1. Remove the class from all tags
2. Add the class to all tags

To get the a belonging to the image that was clicked do something like:

jQuery(this).closest('a')

Hope this works!