5

したがって、最初に、私はプログラミング全般にかなり慣れておらず、Jinja2 にはまったく新しいものです。だから私はサーバー側のもののためにGAEでPythonを使用しています。基本的に、Web からデータを取得し、それを解析して Web ページに表示しています。正しく表示するために、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 は、メインの html ページに Ajaxed されている別のページです。基本的に、ループ内の各要素を選択して個々の説明を表示する方法がわかりません。Jquery で .each() 関数を使用することは、開始するのに適しているように思えましたが、適切に機能していませんでした。ループするたびに div id を変更して、数値を追加したり、それぞれを区別したりする方法はありますか? 助けてくれてありがとう

4

1 に答える 1

11

私は似たようなことをしています。

おそらくご存知のように、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 値を取得し、説明の ID セレクターに追加することdivです。

編集、これが実際の例です：http://jsfiddle.net/VQKee/

于 2012-11-18T23:31:00.750 に答える