使用 jQuery 定位动态 HTML

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 的元素（第一个、第二个等...），然后切换类为 apost 的相应元素。

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

http://jsfiddle.net/HKkq5/

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