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

Question

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

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

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

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

Answer 1

所以在这里很明显，具有相同 ID 的多个元素是非常糟糕的魔力。无论您如何控制这些 WP 网站的加载方式，我都鼓励您修改将脚本重复注入页面，因为即使在进行更改后，您的脚本也会重复运行，因为您有多个块定义文档.ready 函数。你可以用一个全局变量来判断你的脚本是否已经被触发了，但这有点骇人听闻......

我原则上建议您在脚本中添加逻辑以执行以下操作：

• 找到有问题的重复 ID 项并将它们重命名为独特的名称
• 添加一个您可以引用的类而不是一个 ID
• 重构代码以遍历从类选择器返回的项目集合
• 如果真的非常有必要，您还可以跟踪重命名的 ID，单独检索它们并将它们重置为有问题的原始重复 ID 名称，从而为未来的页面用户认罪

这里的前几点可以通过以下方式非常简单地完成：

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

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