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不适用于剩余的for循环元素。你能给我一些正确的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");
    });
  });
});

更新：这是a working demo。

Answer 2

正如Tikhon建议的那样，使用重复的ID会遇到麻烦。为这些元素添加一个类，并使用基于类的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>

Jquery只适用于第一个forloop元素？

2 个答案: