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"); 
    }); 
    }); 
}); 

更新： 这里是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>