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>