प्रत्येक तत्व

Question

पर एक लूप के अंदर ऑनक्लिक घटना प्रदान करने के लिए जिन्जा 2 के साथ जेक्री का उपयोग करना, तो सबसे पहले सामान्य रूप से प्रोग्रामिंग के लिए काफी नया और Jinja2 के लिए नया नया सेट करें। तो मैं सर्वर साइड सामान के लिए जीएई के साथ अजगर का उपयोग कर रहा हूँ। मैं मूल रूप से वेब से कुछ डेटा प्राप्त कर रहा हूं और उसके बाद इसे पार्स कर रहा हूं और इसे वेब पेज पर प्रदर्शित कर रहा हूं। इसे सही तरीके से प्रदर्शित करने के लिए मैं jinja2 का उपयोग कर विभिन्न तत्वों के माध्यम से लूपिंग कर रहा हूं। जब तक यह उपयोगकर्ता

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

}); 

यह एचटीएमएल एक अलग पेज कि मेरी मुख्य html पृष्ठ के लिए ajaxed हो रही है है द्वारा क्लिक किया जाता

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

वर्णन हिस्सा छिपा हुआ है। तो मूल रूप से मैं नहीं जानता कि लूप में प्रत्येक तत्व को अलग-अलग विवरण दिखाने के लिए कैसे चुनें। Jquery में .each() फ़ंक्शन का उपयोग शुरू करने के लिए एक अच्छी जगह की तरह लग रहा था लेकिन यह ठीक से काम नहीं कर रहा था। क्या div आईडी को हर बार अलग करने के लिए कुछ अलग होता है जब यह किसी संख्या को जोड़ने या प्रत्येक को अलग करने के लिए कुछ पसंद करता है? किसी भी मदद के लिए अग्रिम धन्यवाद

Answer 1

मैं कुछ ऐसा कर रहा हूं।

जैसा कि आप शायद अब तक जानते हैं, 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 आईडी अद्वितीय होना चाहिए। jQuery के लिए, कुछ की तरह:

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

क्या करता है यह बटन की आईडी मूल्य लेता है और वर्णन div की आईडी चयनकर्ता करने के लिए इसे जोड़ देती है। http://jsfiddle.net/VQKee/