javascript - jQuery 在一页上显示/隐藏多个评论部分

Question

目前，我正在使用 script在许多基于 WordPress 的网站上显示/隐藏评论。该脚本基本上在每个站点上都能按预期工作。但是，我在使用 Hero 的网站上遇到了问题主题。在索引页面上，主题从 X 个帖子中提取内容。不幸的是，这会导致多次调用脚本，并导致第一篇文章获得 X 个显示/隐藏按钮，而其他文章不受影响。

我不确定如何修改脚本以分别针对每个评论部分。当然，如果主题作者没有为索引页上的所有评论部分分配相同的 ID (#commentBox)，那么任务会更容易。我考虑过限制脚本的范围(即，让脚本的每个实例仅影响其包含的帖子内容)并更改脚本的实际功能以考虑多个评论部分。不幸的是，我还没有能够让它按预期工作。

这里是显示问题的索引页面的链接:http://www.sitestyling.ca/abbyphotography/blog/ 。第一个链接(即脚本的链接)指向一个已实现脚本并按预期运行的页面。

任何帮助或建议将不胜感激。

Answer 1

因此，在这里声明显而易见的事实，拥有多个具有相同 ID 的元素是非常糟糕的。无论您在多大程度上可以控制这些 WP 站点的加载方式，我都会鼓励您努力修改脚本到页面中的重复注入(inject)，因为即使在进行更改之后，您的脚本也会重复运行，因为您有多个定义文档的 block .ready 函数。您可以通过全局来判断您的脚本是否已经触发来改善这一点，但这有点黑客......

原则上我建议您向脚本添加逻辑以执行以下操作:

• 找到有问题的重复 ID 项并将其重命名为唯一的名称
• 添加一个您可以引用的类，而不是 ID
• 重构代码以循环访问从类选择器返回的项目集合
• 如果真的非常有必要，您也可以跟踪重命名的 ID，单独检索它们并将它们重置为有问题的原始重复 ID 名称，从而为 future 的页面用户带来麻烦

这里的前两点可以通过如下方式非常简单地完成:

var uniqueAppend = 1;
var tempName = 'commentBox';
while(jQuery("#commentBox").length > 0 ){
    jQuery("#commentBox").attr('id',tempName + uniqueAppend++).addClass('commentContainer')
}

现在您可以使用 jQuery(".commentContainer") 立即找到所有评论 DIV，然后迭代该集合以执行您需要的任何操作。