Question

我正在研究一个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来说，我不是世界上最有经验的人，所以如果解决方案正在盯着我，那么道歉！我在这里添加了这个小提琴：http://jsfiddle.net/davemcnally/5QZcw/ - 提前致谢！

Answer 1

看看我的解决方案：http://jsfiddle.net/EP96x/

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

计算您点击了cat-item类的元素（第1个，第2个等等），然后使用类apost切换相应的元素。

编辑：正如评论中所指出的，这些元素存在一定的风险。如果是这种情况，则需要使用正则表达式来匹配链接与正确的元素：

http://jsfiddle.net/HKkq5/

$('.cat-item').click(function () {
    var num = $(this).attr('class').match(/cat-item-(\d+)/)[1];
    $('.' + num + 'post').toggle();
});

使用jQuery定位动态HTML

1 个答案: