Rails：滑动切换的 Jquery Ajax 问题

Question

我有一个独立于微博的评论部分，我正在尝试单击微博中的一个按钮，以便在 CSS 幻灯片中显示为无的评论部分滑动和显示。问题是所有 10 条微博的评论按钮都打开了最新的微博，而它应该打开它自己的微博评论部分。我不确定如何更改 javascript 以及 HTML 以使评论按钮动态到它自己的微帖子。这是我正在使用的，非常感谢任何帮助。谢谢。

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>

Answer 1

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

假设每个微博都有一个评论按钮，您应该将微博 id 作为数据属性添加到 Title，然后检索它以找到正确的 CommentContainer。每个评论容器都应在其 ID 中包含其所属微博的 ID。

HTML：

<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>

JavaScript：

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

更改您的 CSS 以隐藏 .CommentContainer 而不是 #CommentContainer

Answer 2

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

您可以向 jQuery 选择器添加上下文，以便它只匹配该元素下方。在这种情况下，我已将this.parent() 添加到容器选择器中，因此它只会匹配单击容器内的#CommentContainer，而 this 会匹配到标题选择器，因此它将匹配当前容器内的标题。

这假设你的微博 HTML 看起来像这样：

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

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