Rails: проблема с JQuery Ajax с slidetoggle

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. Вот почему jQuery находит только первое - вы создаете недействительный HTML.

Предполагая, что у вас есть одна кнопка для комментариев на микропость, вы должны добавить идентификатор микропрограммы в качестве атрибута данных в заголовок и получить это, чтобы найти правильный комментарий. Каждый контейнер комментариев должен содержать идентификатор микропоста, к которому он принадлежит, в его идентификаторе.

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> 

Javscript:

$(".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 внутри контейнера с кликом, а это для селектора заголовков, чтобы он соответствовал заголовку в текущем контейнере.

Это предполагает, что ваша micropost HTML выглядит примерно так:

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

Типы элементов не имеет значения, так что CommentTitle является прямым потомком CommentContainer.