與Jinja2一起使用jQuery提供每個元素循環內的onclick事件

Question

因此，首先關閉編程通常比較新，對於Jinja2來說新建一個。所以我使用python與GAE服務器端的東西。我基本上是從網上獲取一些數據，然後解析並顯示在網頁上。爲了正確顯示它，我正在使用jinja2遍歷不同的元素。

{% for new in news %} 
    <div>{{new}}</div> 
    <button id = "button"></button> 
    <div id ="description"> {{new.description}}</div> 
{% endfor %} 

的描述中部分隱藏在它被點擊用戶

$(#button).each(function(){ 
    $(this).click(function(){ 
     $(description).toggle(); 
    }); 

}); 

這個網站是在獲得Ajaxed到我的HTML主頁一個單獨的頁面，直到。所以基本上我不知道如何選擇循環中的每個元素來顯示單獨的描述。在JQuery中使用.each（）函數似乎是一個很好的開始，但它不能正常工作。有沒有辦法改變div id是不同的東西每次循環通過像添加一個數字或其他東西，使每一個不同？在此先感謝您的幫助

Answer 1

我正在做類似的事情。

正如您現在可能知道的那樣，Jinja2中的循環外部設置的變量不能在循環內進行操作。 Jinja2的範圍有時候有點令人困惑，但我懷疑這是故意試圖將太多邏輯放在模板之外的。

無論如何，我的每個新聞條目都有一個id值。

{% for entry in news %} 
    <div>{{entry.subject}}</div> 
    <button id="button_{{entry.id}}" class="clickme">Click Me!</button> 
    <div id="description_button_{{entry.id}}">{{entry.description}}</div> 
{% endfor %} 

請記住，HTML ID應該是唯一的。對於jQuery的，是這樣的：

$('.button').each(function(){ 
    $(this).click(function(){ 
     $('#description_'+$(this).attr('id')).toggle(); 
    }); 
}); 

什麼，做是需要按鈕的ID值，並將其添加到描述div的ID選擇。

編輯，這裏是一個工作示例：http://jsfiddle.net/VQKee/