Question

I am running a custom loop in a wordpress page that should list all the shoes in one category as well as the color selectors. I got the loop running just fine, and page looks ok. But I have a big problem with jQuery script that changes the images.

Each post has:
Several images of different colored shoes and selectors for colors – different shoes have a different number of colors (you can see a demo at: http://www.etfovac.com/testbed/shoe/ – the final page should look like this http://www.etfovac.com/testbed/shoe/mockup.jpg )
my jQ function looks like this (for the testbed page)

$(document).ready(function() {
    $(".colorwrap a").click(function(){
        var a = $(this).attr("rel");
        $(".cipela-1, .cipela-2, .cipela-3, .cipela-4").slideUp('slow');
        $("."+a).slideDown("slow");
    });
    $(".cipela-1").slideDown("slow");
});

But it changes the picture of every shoe on the page.

I can hardcode it in the function so it selects cipela 1 thru 50

What would be a better way to do this?

Answer 1

Dont do slideDown in all the items with that class. Only do the childs of current elements parent. Use the closest() function

$(document).ready(function() {
    $(".colorwrap a").click(function(){
        var item=$(this);           
        var a = item.attr("rel");
       item.closest(".post").find(".cipela-1, .cipela-2, .cipela-3, .cipela-4").slideUp('slow');
        item.closest(".post").find("."+a).slideDown("slow");
        });
        $(".cipela-1").slideDown("slow");
});

Working sample http://jsfiddle.net/rXB5G/16/