Używanie Jquery z Jinja2 do dostarczania zdarzenia onclick wewnątrz pętli na każdym elemencie

Question

Tak więc po raz pierwszy jestem całkiem nowy w programowaniu w ogóle i definetley nowy w Jinja2. Tak używam python z GAE dla rzeczy po stronie serwera. Zasadniczo otrzymuję niektóre dane z Internetu, a następnie analizuję je i wyświetlam na stronie internetowej. Aby wyświetlić go poprawnie, przechodzę przez różne elementy za pomocą jinja2.

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

Opis część jest ukryta do momentu kliknięciu przez użytkownika

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

}); 

To jest strona html oddzielna że jest coraz Ajaxed w mojej głównej stronie html. Zasadniczo nie wiem, jak wybrać każdy element w pętli, aby pokazać tam poszczególne opisy. Użycie funkcji .each() w Jquery wydawało się dobrym początkiem, ale nie działało poprawnie. Czy jest jakiś sposób, aby zmienić identyfikator div na coś innego za każdym razem, gdy się połączy, np. Dodając do niego numer lub coś, co odróżni każdy z nich? Z góry dzięki za pomoc

Answer 1

Robię coś podobnego.

Jak już zapewne wiesz, zmienne ustawione poza pętlami w Jinja2 nie mogą być obsługiwane w pętli. Zakres Jinja2 jest czasami trochę zagmatwany, ale podejrzewam, że jest to zamierzone, aby zachować zbyt dużą logikę z szablonu.

W każdym razie mam wartość id dla każdego z moich wpisów w wiadomościach.

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

Należy pamiętać, że identyfikatory HTML powinny być niepowtarzalne. Dla jQuery, coś jak:

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

Co to robi to bierze wartość identyfikatora tego przycisku i dołącza go do zmiany ID opisu div.

Edytuj, oto przykład: http://jsfiddle.net/VQKee/