CODEWITHSUNDEEP
jquerywordpresssyntaxclick
user1269625
user1269625

Reputation: 3209

jQuery click function not working properly

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/

Upvotes: 0

Views: 636

Answers (2)

Runar Halse
Runar Halse

Reputation: 3558

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!

Upvotes: 2

Ranjith Ramachandra
Ranjith Ramachandra

Reputation: 10764

Remove the $ from function argument

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

Upvotes: 0

Related Questions