Есть ли способ сделать этот сценарий JQuery динамическим?

Question

Я использую этот код jquery, чтобы показать и скрыть div на моей странице Как видите, я ограничен 5 делами. Есть ли способ сделать их динамичными?

$(document).ready(function() {
  $('.box').hide();
  $('a.toggle').click(function() {
    $('.box').toggle(400);
    return false;
  });
});

---

<a href="#" class="toggle" title="Show Comments"><img src="images/read.gif" alt="" /></a>
<div class="box" class="comment">hidden content</div>

Это мой исправленный код

$(function () {
  $('div.box').hide();
  $('a.toggle').click(function () {
    $(this).next('div.box').toggle(400);
  });
});

---

<div class="entry">
  <h3>Title</h3>
  <p>content</p>
  <p class="posted">Posted by Admin<br />
  <a href="#" class="toggle">
    <img src="read.gif" alt="" />
  </a>
</div>
<div class="box" class="comment">Hidden</div>

Answer 1

Глядя на свою разметку, вы можете сделать что-то вроде этого:

$(document).ready(function () {
  $('div.box').hide();

  $('a.toggle').click(function () { // all A elements with class 'toggle'
    $(this).next('div.box').toggle(400); // toggle the next DIV with class 'box'
  });
});

По сути, связывайте обработчик кликов со всеми вашими ссылками с классом toggle, а затем, когда они нажимаются, он ищет следующего брата ( относительно нажатой ссылки ), который является div с классом box, с использованием функции Traversing / next .

Проверьте приведенный выше пример с вашей разметкой здесь .

Редактировать: Я просмотрел вашу разметку, и ваши .toggle ссылки вложены в элемент div.entry, также есть закрытый абзац, поэтому я снова настроил код для вашей разметки:

$(function () { 
  $('div.box').hide(); 
  $('a.toggle').click(function () { 
    $(this).parents('.entry').next('div.box').toggle(400);
  }); 
});

Вы заметите, что я ищу элемент div.entry, так как .box - их братья и сестры.

Проверьте пример обновления здесь .