Jquery работает только на первом элементе forloop?

Question

Вот мой шаблон Django:

{% for feed in feeds %}
    <div id="feed"><b>At {{feed.location}}:<b> {{feed.msg}}</b></div></br>
    <button id="bb{{feed.id}}">Add Comment</button>
    <div id="commentbox" style="display:none;">
      <form method="post" action="/comment/{{feed.id}}/">
        {{cform.as_p}}
        <input type="submit" value="comment" />
      </form>
    </div>

{% endfor %}

Код Jquery здесь:

<script>
    $(function() {


          $("#bb.").click(function () {
          $("#commentbox").toggle("slow");
          });

    });
</script>

Но здесь только первый div переключается внутри цикла for.Jquery не работает для остальных элементов цикла.Можете ли вы дать мне правильный код JQuery.Спасибо.

Answer 1

внести это изменение:

<button class="bb" id="bb{{feed.id}}">Add Comment</button>
<div class="commentbox" style="display:none;">

и вот это:

$(document).ready(function() {
  $(".bb").each(function(){
    $(this).click(function () {
      $(this).next().toggle("slow");
    });
  });
});

Обновление: А вот рабочая демоверсия .

Answer 2

Как предполагает Тихон, использование дубликатов идентификаторов вызывает проблемы.Добавьте класс к этим элементам и используйте селектор jQuery, основанный на классе, и все будет в порядке.Что-то вроде

{% for feed in feeds %}
<div id="feed"><b>At {{feed.location}}:<b> {{feed.msg}}</b></div></br>
<button class="bb" id="bb{{feed.id}}">Add Comment</button>
<div class="commentbox" style="display:none;">
  <form method="post" action="/comment/{{feed.id}}/">
    {{cform.as_p}}
    <input type="submit" value="comment" />
  </form>
</div>
{% endfor %}

и

<script>
$(function() {
      $(".bb").click(function () {
          $(this).next('.commentbox').toggle("slow");
      });
});
</script>