Ориентация на определенный класс с помощью jQuery

Question

Ориентация на определенный класс с помощью jQuery

0

Я пытаюсь отобразить скрытый класс в 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");
});

Yax 17 дек. 2013, в 19:37

Источник

Теги:

javascript

jquery

html

css

3 ответа

1

Вы можете использовать .closest() чтобы найти.feeds div, а затем использовать .find() для *.comment_data * div

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

Satpal 17 дек. 2013, в 15:17

0

Вы выбираете все объекты, соответствующие селектору .comment_data.

Вам нужно будет ограничить его тем же контейнером, в который нажата кнопка. Там вы можете сделать это несколькими способами. Одним из простых было бы:

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

Tom Pietrosanti 17 дек. 2013, в 16:43

Ещё вопросы

SamP · Accepted Answer · 2013-12-17T15-29-00.000Z

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

Это более удобно, поскольку меньше зависит от структуры HTML.
Это добилось цели. Вы только что опечатали мой день продуктивно. Большое спасибо.