0

1 つのカテゴリのすべての靴とカラー セレクターを一覧表示する必要があるワードプレス ページでカスタム ループを実行しています。ループは正常に実行されており、ページは正常に見えます。しかし、画像を変更する 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

そのクラスのすべてのアイテムで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 に答える
1

兄弟だけをスライドさせてみてください:

$(this).siblings(".cipela-1, .cipela-2, .cipela-3, .cipela-4").slideUp('slow');
于 2012-05-05T17:59:13.353 に答える