3

私は WordPress テーマに取り組んでおり、トグルされたカテゴリ項目に基づいてライブ フィルタリングの投稿結果の JS を使用しています。カテゴリ リンクは から作成されwp_list_categories();、投稿リストはWP_Query();

現時点では、これを機能させるために JS に一意の投稿 ID を設定していますが、他のユーザーにテーマを使用してもらうために、新しいカテゴリを追加するたびに JS を編集する必要はありません。基本的には、JSの機能を持っていて、カテゴリをいくつ追加しても投稿をフィルタリングできるようにしたいです。

私の現在のマークアップは次のようなものです:

<section id="sidebar">
    <ul>
        <li class="cat-item cat-item-1"></li>
        <li class="cat-item cat-item-2"></li>
        <li class="cat-item cat-item-3"></li>
    </ul>
</section>

<section id="postlist">
    <div class="1post apost"></div>
    <div class="2post apost"></div>
    <div class="3post apost"></div>
</section>

そして、次のように私のJS:

$(".cat-item-1").click( function() {
    $('.1post').toggle('slow');
});

$(".cat-item-2").click( function() {
    $('.2post').toggle('slow');
});

$(".cat-item-3").click( function() {
    $('.3post').toggle('slow');
});

これは、カテゴリと投稿IDごとに毎回明示的に入力するとうまく機能しますが、次のようなことを達成しようとしています:

$(".cat-item-" + (dynamic cat ID)).click( function() {
    $("." + (dynamic post ID that matches cat ID) + "post").toggle('slow');
});

これはまったく可能ですか?私はJSに関して世界で最も経験豊富な人ではないので、解決策が私を直視している場合は申し訳ありません! これを Fiddle としてここに追加しました: http://jsfiddle.net/davemcnally/5QZcw/ — 前もって感謝します!

4

1 に答える 1

3

私のソリューションを見てください: http://jsfiddle.net/EP96x/

$('.cat-item').click(function () {
    $('.apost').eq($(this).index()).toggle();
});

cat-itemクリックしたクラスの要素(1st、2ndなど)をカウントし、対応する要素をクラスで切り替えapostます。

編集:コメントで指摘されているように、要素が順不同になるリスクがあります。その場合は、リンクを適切な要素と一致させるために正規表現を使用する必要があります。

http://jsfiddle.net/HKkq5/

$('.cat-item').click(function () {
    var num = $(this).attr('class').match(/cat-item-(\d+)/)[1];
    $('.' + num + 'post').toggle();
});
于 2012-09-29T14:53:42.650 に答える