特定类的jQuery函数

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

每个post都有：不同颜色的鞋子和颜色选择器的几个图像 – 不同的鞋子有不同的颜色（你可以在http://www.etfovac.com/testbed/shoe/看到一个演示 – 最后的页面应该看起来像这样http://sofzh.miximages.com/jquery/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

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