Verwendung von Jquery mit Jinja2, um Onclick-Ereignis innerhalb einer Schleife auf jedem Element

Question

So erstens bin ich ziemlich neu Programmierung im Allgemeinen und neu zu Jinja2. Also benutze ich Python mit GAE für Serverseiten. Ich erhalte im Grunde einige Daten aus dem Internet und analysiere sie dann und zeige sie auf einer Webseite an. Um es korrekt anzuzeigen, durchstreife ich die verschiedenen Elemente mit jinja2.

{% for new in news %} 
    <div>{{new}}</div> 
    <button id = "button"></button> 
    <div id ="description"> {{new.description}}</div> 
{% endfor %} 

Die Beschreibung Teil versteckt, bis er auf vom Benutzer

$(#button).each(function(){ 
    $(this).click(function(){ 
     $(description).toggle(); 
    }); 

}); 

Diese html ist eine separate Seite angeklickt wird, die in meiner Haupt-HTML-Seite Ajaxed wird immer. Also im Grunde weiß ich nicht, wie man jedes Element in der Schleife auswählt, um dort einzelne Beschreibungen zu zeigen. Die Verwendung der .each() - Funktion in Jquery schien ein guter Anfang zu sein, aber es funktionierte nicht richtig. Gibt es eine Möglichkeit, die div id jedes Mal anders zu gestalten, wenn sie sich durchschlingt, wie zum Beispiel eine Zahl hinzuzufügen oder etwas, um sie voneinander zu unterscheiden? Vielen Dank im Voraus für jede Hilfe

Answer 1

Ich mache etwas ähnliches.

Wie Sie wahrscheinlich wissen, können Variablen außerhalb von Schleifen in Jinja2 nicht innerhalb der Schleife bearbeitet werden. Der Umfang von Jinja2 ist manchmal etwas verwirrend, aber ich vermute, dass dies beabsichtigt ist, um zu viel Logik aus der Vorlage herauszuhalten.

Wie auch immer, ich habe einen id Wert für jeden meiner Nachrichten Einträge.

{% 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 %} 

Beachten Sie, dass HTML-IDs eindeutig sein sollten. Für die jQuery, so etwas wie:

$('.button').each(function(){ 
    $(this).click(function(){ 
     $('#description_'+$(this).attr('id')).toggle(); 
    }); 
}); 

Was das tut, ist es die ID-Wert der nimmt Taste und hängt ihn an den ID-Selektor der Beschreibung div.

Edit, hier ist ein funktionierendes Beispiel: http://jsfiddle.net/VQKee/