javascript - 使用 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 方面，我不是世界上最有经验的人，如果解决方案让我眼前一亮，我深表歉意!我在此处将其添加为 fiddle :http://jsfiddle.net/davemcnally/5QZcw/ — 提前致谢!

Answer 1

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

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

它会计算您点击了哪个具有 cat-item 类的元素(第一个、第二个等...)，然后切换具有 apost 类的相应元素。

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

http://jsfiddle.net/HKkq5/

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