Utilizzo di Jquery con Jinja2 per fornire eventi onclick all'interno di un loop su ciascun elemento

Question

Quindi, per prima cosa, sono abbastanza nuovo per la programmazione in generale e sicuramente nuovo per Jinja2. Quindi sto usando Python con GAE per roba lato server. Praticamente sto recuperando alcuni dati dal web e poi analizzandoli e visualizzandoli su una pagina web. Per visualizzarlo correttamente, faccio scorrere i vari elementi usando jinja2.

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

La parte descrizione è nascosto fino a quando non viene cliccato dall'utente

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

}); 

Questo HTML è una pagina separata che sta ottenendo ajaxed nella mia pagina html principale. Quindi in pratica non so come selezionare ogni elemento nel loop per mostrare le singole descrizioni. L'uso della funzione .each() in Jquery sembrava un buon punto di partenza, ma non funzionava correttamente. C'è qualche modo per cambiare il div id per essere qualcosa di diverso ogni volta che lo attraversa come aggiungere un numero o qualcosa per renderlo distinto? Grazie in anticipo per qualsiasi aiuto

Answer 1

Sto facendo qualcosa di simile.

Come probabilmente saprete, le variabili impostate al di fuori dei loop in Jinja2 non possono essere utilizzate all'interno del loop. Lo scopo di Jinja2 è un po 'confuso, a volte, ma sospetto che questo sia intenzionale a tentare di mantenere troppa logica dal modello.

In ogni caso, ho un valore id per ciascuna delle mie voci di notizie.

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

Ricordare che gli ID HTML devono essere univoci. Per il jQuery, qualcosa come:

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

Ciò che fa è che ci vuole il valore ID del pulsante e lo aggiunge al selettore ID della descrizione div.

Modifica, ecco un esempio: http://jsfiddle.net/VQKee/