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/

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

1 个答案: