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

Question

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

我不确定如何修改脚本以便单独定位每个评论部分。当然，如果主题作者没有在索引页面上为相同的id（#commentBox）分配所有评论部分，那么任务会更容易。我已经考虑过限制脚本的范围（即，让脚本的每个实例仅影响其中包含的帖子内容）并更改脚本的实际功能以考虑多个注释部分。不幸的是，我还没有按照预期的那样工作。

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

非常感谢任何帮助或建议。

Answer 1

所以说明这里很明显，拥有多个具有相同ID的元素是非常糟糕的mojo。在任何程度上你可以控制如何加载这些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，然后遍历该集合以执行您需要的任何操作。