jQuery click function not working properly

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/

I get the same result...all image links get cboxElement added and doesnt remove the class cboxElement from the image link that was clicked — user1269625
– user1269625, Commented Sep 18, 2012 at 7:30

Runar Halse · Accepted Answer · 2012-09-18 07:04:07Z

2

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:

Remove the class from all tags
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!

answered Sep 18, 2012 at 7:04

Runar Halse

3,55810 gold badges42 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Klaas Leussink Over a year ago

I'd do a jQuery(this).parent(); the clicked image (the handler is apparently tied to the image) will always be inside the link that needs to be modified. Then chaining it to the other links: jQuery(this).parent().doStuff().siblings().doStuff();

Runar Halse Over a year ago

yeah, parent would do the same assuming that the <a> is always the direct parent of the <img>

Ranjith Ramachandra · Accepted Answer · 2012-09-18 07:02:44Z

0

Remove the $ from function argument

jQuery(".wpcart_gallery img").click(function(){
             jQuery(".wpcart_gallery a").removeClass('cboxElement').siblings().addClass('cboxElement');
        });

answered Sep 18, 2012 at 7:02

Ranjith Ramachandra

10.9k16 gold badges62 silver badges98 bronze badges

2 Comments

user1269625 Over a year ago

I get the same result...all image links get cboxElement added and doesnt remove the class cboxElement from the image link that was clicked

Ranjith Ramachandra Over a year ago

Ya I guess. Should have not answered in haste

Collectives™ on Stack Overflow

jQuery click function not working properly

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related