Ruby on rails Rails:jQueryAjax与slidetoggle的问题

我有一个评论部分，它是一个micropost的一部分，我试图单击micropost中的一个按钮，以便在CSS幻灯片中显示为“无”的评论部分。问题是，所有10个micropost的注释按钮都会在应该打开micropost自己的注释部分时打开最近的micropost。我不确定如何改变javascript和HTML，使评论按钮动态到它自己的micropost。这是我的工作，任何帮助都是非常感谢的。多谢各位

JS

$(".CommentTitle").click(function(){
    $("#CommentContainer").slideToggle("slow", function(){ 
        $(".CommentTitle").html($(this).is(":hidden") ? "Comments" : "Comments");  
    });
});

HTML

<div class='Actions'>
<div class='CommentButton'>
<span class='CommentIcon'></span>
<span class='CommentNum'>5</span>
<span class='CommentTitle'>Comments</span>
</div>
</div>

<div id='CommentContainer' class='<%= micropost.id%>'>
<div class='Comment'>
<%=render "comments/form" %>
</div>
<div id='comments'>
<%=render @micropost.comments %>
</div>
</div>

5.
评论

您可以将上下文添加到jQuery选择器中，以便它只匹配该元素下面的内容。在本例中，我将

this.parent（）

添加到容器选择器中，使其仅与单击的容器中的#CommentContainer匹配，并将其添加到标题选择器中，使其与当前容器中的标题匹配

这假设您的micropost HTML如下所示：

<div id='#CommentContainer'>
  <span class='CommentTitle'>Some clickable title</span>
  <p>data here</p>
</div>

一些可点击的标题
这里的数据

---

元素类型无关紧要，只是CommentTitle是CommentContainer的直接子元素。

更改HTML，使CommentContainer元素上没有重复的ID。这就是为什么jQuery只找到第一个——您正在创建无效的HTML

假设每个microspost有一个Comment按钮，那么应该将microspost id作为数据属性添加到标题中，并检索该属性以找到正确的CommentContainer。每个注释容器的ID中都应该包含它所属的micropost的ID

HTML:

---

将CSS更改为hide.CommentContainer而不是#CommentContainer

你能看一下HTML的编辑吗？动作的div包含按钮而不是CommentContainer div，因为它被CSS隐藏了，还有其他方法吗？我应该在action和commentcontainer周围添加另一个div标签吗？我会在几秒钟内添加另一个答案，并附上我的完整建议。您的帮助真是太棒了！我发现你的代码是有效的，但令我愚蠢的是，我没有添加不引人注目的js文件（请原谅我）。再次感谢：）嗯，它似乎不起作用，而且CommentContainer被CSS隐藏了，但是随着

-

的添加，CSS无法隐藏它，嗯，我不太确定是什么错你似乎把类和ID搞混了。CSS类可以应用于任何元素，并且可以将多个类应用于单个元素。一个元素只能有一个id属性，并且它在页面上必须是唯一的。将您的CSS从

#CommentContainer{display:none；}

更改为

.CommentContainer{display:none；}

mmm尽管我将其更改为类而不是id，但CommentContainer上有一个-和一个postid，所以HTML不是没有拾取仅为CommentContainer指定的CSS吗？我添加了

类=“评论容器“

以及将id设置为“CommentContainer-”，因此。CommentContainer CSS样式应适用于所有这些样式我已经完成了您所说的一切，我更改了JS和类、id和HTML，它现在隐藏了容器，但单击时不会打开任何容器，非常抱歉，我非常感谢您的帮助，非常感谢！”

<div id='#CommentContainer'>
  <span class='CommentTitle'>Some clickable title</span>
  <p>data here</p>
</div>

<div class='Actions'>
    <div class='CommentButton'>
        <span class='CommentIcon'></span>
        <span class='CommentNum'>5</span>
        <span class='CommentTitle' data-micropost='<%= micropost.id %>'>Comments</span>
    </div>
</div>

<div id='CommentContainer-<%= micropost.id%>' class='CommentContainer'>
    <div class='Comment'>
        <%=render "comments/form" %>
    </div>
    <div id='comments'>
        <%=render @micropost.comments %>
    </div>
</div>

$(".CommentTitle").click(function(){
    var title = this;
    var postID = $(this).data('micropost');
    $("#CommentContainer-" + postID).slideToggle("slow", function(){ 
        $(".CommentTitle", title).html($(this).is(":hidden") ? "Comments" : "Comments");  
    }); 
});