Question

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);
    });
});​

Answer 1

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