首先,我对一般编程相当陌生,对 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 更改为不同的内容,例如向其添加数字或使每个 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 %}
请记住,HTML ID 应该是唯一的。对于 jQuery,类似:
$('.button').each(function(){
$(this).click(function(){
$('#description_'+$(this).attr('id')).toggle();
});
});
它的作用是获取按钮的 ID 值并将其附加到描述 div
的 ID 选择器中。
编辑,这是一个工作示例:http://jsfiddle.net/VQKee/
关于jquery - 使用 Jquery 和 Jinja2 在每个元素的循环内提供 onclick 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13423646/