使用 jQuery 定位动态 HTML

Posted 2023-02-27

【中文标题】使用 jQuery 定位动态 HTML

【英文标题】：Target Dynamic HTML With jQuery

【发布时间】：2012-09-21 03:29:00

【问题描述】：

我正在开发一个 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/ — 提前致谢！

【问题讨论】：

我猜像 FIDDLE 这样的事情会做吗？？

【参考方案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();
);

【讨论】：

这不是一个坏主意，但如果任何侧边栏或帖子元素由于某种原因出现故障，它就会失败。我还是会竖起大拇指的。

@adeneo 如果由于某种原因它们出现故障，则不可能（在类名上没有正则表达式）匹配哪个链接应该切换哪个元素。因此需要额外的标记/类/ID。

完美——感谢您的快速回答，正是我所需要的 :)