0

我正在一个 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

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

4

2 回答 2

1

尝试只滑动兄弟姐妹：

$(this).siblings(".cipela-1, .cipela-2, .cipela-3, .cipela-4").slideUp('slow');
于 2012-05-05T17:59:13.353 回答
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/

于 2012-05-05T18:07:12.180 回答