使用jQuery定位动态HTML元素

Question

使用jQuery定位动态HTML元素

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/ — 预先感谢！

- Dave McNally

我猜这样的FIDDLE就可以了吧？ - adeneo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michał Miszczyszyn · Accepted Answer

请看我的解决方案：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();
});