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.

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

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

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

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

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