使用Jquery和Jinja2在每个元素的循环中提供onclick事件

所以首先，我对编程一般来说是相当陌生的，对Jinja2来说是非常陌生的。所以我将python与GAE一起用于服务器端的东西。我基本上是从网络上获取一些数据，然后通过它进行解析并将其显示在网页上。为了正确地显示它，我正在使用jinja2遍历不同的元素

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

---

这个html是一个独立的页面，它与我的主html页面连接在一起。所以基本上我不知道如何选择循环中的每个元素来显示这些单独的描述。在Jquery中使用.each（）函数似乎是一个很好的开始，但它没有正常工作。是否有什么方法可以在每次循环时将div id更改为不同的内容，例如向其添加一个数字或使每个内容都不同？提前感谢您的帮助

我正在做类似的事情

您现在可能已经知道，在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 %}

它的作用是获取按钮的ID值并将其附加到description

div

的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 %}

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