Question

我的帖子在.each循环中丢失，我有一个链接在循环底部显示注释。

我想在点击时显示评论部分，但是当我点击所有帖子的评论时也会打开。我只想要点击的那个打开。

我已尝试过在本网站上找到的大量不同的例子，但到目前为止，他们都没有工作过。

我确信这很容易实现，但我是一个JavaScript菜鸟。

这是JSFiddle链接 - http://jsfiddle.net/omgwhyamisobad/h0yhvqa3/

以及代码段 -

JS

$(document).ready(function() {
  $('.artist-micropost-comment-click').click(function() {
    $('.artist-micropost-comments-container').toggle();
  });
});

HTML

<div class="artist-micropost-social">
  <a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>

<div class="artist-micropost-social">
  <a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>

<div class="artist-micropost-social">
  <a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>

CSS

.artist-micropost-comments-container {
  display: none;
}

Answer 1

你试图抓住相关元素的方式是错误的。您需要根据被单击的元素遍历DOM。如果在这种情况下尝试使用直接类选择器，那么它将选择所有具有所提供类的元素。

尝试，

$(document).ready(function() {
  $('.artist-micropost-comment-click').click(function() {
    $(this).closest('.artist-micropost-social')
             .next('.artist-micropost-comments-container').toggle();
  });
});

DEMO

Answer 2

使用

$(document).ready(function() {
    $('.artist-micropost-comment-click').click(function() {
        $(this)
            .closest('.artist-micropost-social') //Find parent container
            .next('.artist-micropost-comments-container') //Find next comments container
            .toggle();
    });
});

Answer 3

试试这个SEE DEMO

$(document).ready(function() {
  $('.artist-micropost-comment-click').click(function() {
      $( this ).parent().next().slideDown().siblings('.artist-micropost-comments-container').slideUp();

  });
});

JQuery在.each循环中切换所有div

JS

HTML

CSS

3 个答案:

DEMO