Javascript 使用jQuery将动态HTML作为目标

我正在开发一个WordPress主题，并使用JS根据切换的类别项实时过滤帖子结果。类别链接只是从

wp_list_categories（）创建的

和post列表是通过

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>

当我每次为每个类别和帖子ID显式地键入它时，这很好，但我正在尝试完成以下任务：

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

这有可能吗？说到JS，我并不是世界上最有经验的人，所以如果问题的解决方案就摆在我面前，我深表歉意！我在这里添加了这个作为小提琴：-提前谢谢
 看看我的解决方案：

它统计您单击的具有类
cat项的元素（第1、第2等），然后将相应的元素与类
apost
切换

编辑：正如评论中所指出的，元素出现问题有一定的风险。如果是这种情况，则需要使用regexp，以便将链接与适当的元素匹配：


我猜像这样的东西可以做到这一点？？这不是一个坏主意，但如果任何边栏或帖子元素出于某种原因出现故障，它就会失败。我还是会竖起大拇指的。@adeneo如果由于某种原因它们出现了问题，那么（如果类名上没有regexp）就不可能匹配哪个链接应该切换哪个元素。因此，需要额外的标记/class/id。完美-感谢您的快速回答，正是我所需要的：）
$(".cat-item-" + (dynamic cat ID)).click( function() {
    $("." + (dynamic post ID that matches cat ID) + "post").toggle('slow');
});

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

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