特定类的 jQuery 函数

Question

我正在一个 wordpress 页面中运行一个自定义循环，该循环应该列出一个类别中的所有鞋子以及颜色选择器。我让循环运行得很好，页面看起来还不错。但我对更改图像的 jQuery 脚本有一个大问题。

每个帖子都有： 不同颜色的鞋子和颜色选择器的几张图片 - 不同的鞋子有不同数量的颜色（您可以在以下位置查看演示：http://www.etfovac.com/testbed/shoe/ - 最后一页应该是这样的http://www.etfovac.com/testbed/shoe/mockup.jpg） 我的 jQ 函数看起来像这样（对于 testbed 页面）

$(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");
});

但它会改变页面上每只鞋的图片。

我可以在函数中对其进行硬编码，以便选择 cipela 1 到 50

有什么更好的方法来做到这一点？

Answer 1

不要在该类的所有项目中执行 slideDown。仅将当前元素的子元素作为父元素。使用closest()函数

$(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");
});

工作样本http://jsfiddle.net/rXB5G/16/

Answer 2

尝试只滑动兄弟姐妹：

$(this).siblings(".cipela-1, .cipela-2, .cipela-3, .cipela-4").slideUp('slow');