特定类的jQuery函数 [英] jQuery function for specific class

问题描述

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

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.

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

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

有什么更好的方法?

推荐答案

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

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

工作示例 http://jsfiddle.net/rXB5G/16/

这篇关于特定类的jQuery函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！