Question

我试图在jQuery中显示一个隐藏的类，但它不适用于我所针对的类。它显示了整个班级：

<div class="feeds">
  <input class="post_id" />
  <textarea class="commentdata"></textarea>
  <button class="mmore">More</button>
  <p class="time">time</p>
  <div class = "comment_data">
    <div class = "comment">
      <p> Comments </p>
    </div>
  </div>
</div>

<div class="feeds">
  <input class="post_id" />
  <textarea class="commentdata"></textarea>
  <button class="mmore">More</button>
  <p class="time">time</p>
  <div class = "comment_data">
    <div class = "comment">
      <p> Comments </p>
    </div>
  </div>

<div class="feeds">
  <input class="post_id" />
  <textarea class="commentdata"></textarea>
  <button class="mmore">More</button>
  <p class="time">time</p>
  <div class = "comment_data">
    <div class = "comment">
      <p> Comments </p>
    </div>
  </div>
</div>

默认情况下，课程comment_data为display: none，只有在点击更多按钮时才会显示。正在工作，但它显示3 div的所有评论。

这是我的jQuery代码：

$( ".mmore" ).click(function() {
   $('.comment_data').slideToggle("slow");
});

Answer 1

$('.mmore').click(function() {
   $(this).parents('.feeds').find('.comment_data').slideToggle('slow')
});

Answer 2

您可以使用.closest()查找 .feeds div，然后使用.find()代替* .comment_data * div

$('.mmore').click(function() {
   $(this).closest('.feeds').find('.comment_data').slideToggle('slow')
});

Answer 3

您正在选择与选择器.comment_data匹配的所有对象。

您需要将其限制在单击按钮所在的同一容器中。您可以通过多种方式执行此操作。一个简单的方法是：

$( ".mmore" ).click(function() {
   $(this).parent().find('.comment_data').slideToggle("slow");
});

使用jQuery定位特定的类

3 个答案: