使用 Jquery 和 Jinja2 在每个元素的循环内提供 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();
    });

});

这个 html 是一个单独的页面，它被 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/