CODEWITHSUNDEEP
jqueryjquery-uiclass
loriensleafs
loriensleafs

Reputation: 2255

jquery ui switching classes function

I have a bunch of thumbnail containers with a class and then two containers in them, like so:

<div id="color_dance" class="thumb">
    <img class="thumb_img" src="http://www.klossal.com/portfolio/tile_dance_color.jpg">
    <div class="thumb_info info_color_2"><p class="tile_info_1"> Space Series</p><p class="tile_info_2">Photoshop, Wacom Tablet</p></div>
</div>

When you click on it I'd like to switch the classes on all .thumb_info elements from info_color_3 to info_color_2 except the one clicked which does the opposite, switches the class from info_color_2 to info_color_3.

This is the JS I came up with but it's not working and I'm not sure why.

$(".thumb").click(function() {
    $(".thumb_info").not(this).switchClass("info_color_3", "info_color_2", 300);
    $(this).find('.thumb_info').
    function() {
        $(this).switchClass("info_color_2", "info_color_3", 300);
    });
});​

Upvotes: 1

Views: 176

Answers (2)

Nope
Nope

Reputation: 22339

You can't call find('.thumb_info').function(). You can call .switchClass() on the element returned by .find() though.

Try using the code like this:

$(".thumb").click(function() {
    $(".thumb_info").not(this).switchClass("info_color_3", "info_color_2", 300);

    $(this).find('.thumb_info').switchClass("info_color_2", "info_color_3", 300);
});​

DEMO

Upvotes: 2

Max
Max

Reputation: 50

I have not used this function yet, but did you forget the "each" between "$(this).find('.thumb_info')." and "function"?

Try this:

$(".thumb").click(function() {
   $(".thumb_info").not(this).switchClass( "info_color_3", "info_color_2", 300 );
   $(this).find('.thumb_info').each(function() {
     $(this).switchClass( "info_color_2", "info_color_3", 300 );
   });
});

Upvotes: 0

Related Questions