jquery - 结合使用Jinquery和Jquery在每个元素的循环内提供onclick事件

因此，首先，对于一般编程而言，我是相当陌生的，而对于Jinja2，则是definetley。所以我在GAE中使用python作为服务器端的东西。我基本上是从网络上获取一些数据，然后进行解析并将其显示在网页上。为了正确显示它，我使用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每次循环更改为不同的方法，例如向其添加数字或使每个对象不同的方法？预先感谢您的任何帮助

最佳答案

我在做类似的事情。

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