Question

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

每篇文章都有：不同颜色的鞋子和颜色选择器的几个图像 - 不同的鞋子有不同数量的颜色（你可以在http://www.etfovac.com/testbed/shoe/看到一个演示 - 最后一页应该看起来像http://www.etfovac.com/testbed/shoe/mockup.jpg）我的jQ函数看起来像这样（对于测试页面）

$(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

尝试只滑动兄弟姐妹：

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

Answer 2

不要在该类的所有项目中执行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/

特定类的jQuery函数

2 个答案: