गतिशील रूप से बनाए गए divs

Question

टॉगल करें मैं अपना हल्का ब्लॉगिंग प्लेटफ़ॉर्म लिख रहा हूं (मैं PHP & jQuery सीखने की कोशिश कर रहा हूं इसलिए मैं केवल वर्डप्रेस का उपयोग नहीं करना चाहता)। PHP का उपयोग करके, मेरे पास एक पृष्ठांकन प्रणाली है जो प्रति पृष्ठ 5 ब्लॉग पोस्ट दिखाती है। मेरे लूप लूप के भीतर, मैं एक लिंक चाहता हूं जो "एक टिप्पणी छोड़ दो" कहता है, जब क्लिक किया गया, तो एक डीआईवी खुल जाएगा जिसमें एक टिप्पणी इनपुट करने के लिए टेक्स्टबॉक्स होगा। मैं जिस मौजूदा कोड का उपयोग कर रहा हूं वह पेज पर सभी 5 टिप्पणी डीआईवी खोलता है। मुझे उन सभी कमीशन डीआईवी की एक अद्वितीय आईडी (ब्लॉग पोस्ट आईडी के आधार पर) देने में सक्षम होना चाहिए और इसे मेरे jquery टॉगल फ़ंक्शन में डालने में सक्षम होना चाहिए ताकि लिंक पर क्लिक होने पर केवल एक टिप्पणी डीआईवी खोला जा सके, न कि सभी उन्हें। क्या कोई मेरी मदद कर सकता हैं?

यहाँ मेरी jQuery है जो पृष्ठ पर सभी चालू किए जाने divs को खोलता है:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $(".toggleCommentBox").click(function() { 
     $(".commentBox").toggle() 
    }); 
    });  
</script> 

और यहाँ मेरी जबकि पाश में कोड जो ब्लॉग पोस्ट और लिंक प्रदर्शित करता है:

<a href = "#" class = "toggleCommentBox">Leave a Comment</a> 

<div class = "commentBox" style = "display:none;"> 
    ...Form stuff in here 
</div> 

मैं डॉन टिप्पणी बॉक्स में फॉर्म सामग्री के साथ मदद की ज़रूरत नहीं है, मुझे बस अद्वितीय पेज पर 5 टिप्पणी बॉक्सों में से प्रत्येक को बनाने के लिए jQuery के साथ मदद की ज़रूरत है, और वे सभी 5 टॉगल खोलने के एक लिंक के बजाय अलग-अलग टॉगल-सक्षम पेज पर डीआईवी, जैसे अब क्या होता है। कोई भी मदद जो मुझे दे सकता है उसकी सराहना की जाएगी।

Answer 1

उपयोग jQuery अगले समारोह:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $(".toggleCommentBox").click(function() { 
     $(this).next(".commentBox").toggle() 
    }); 
    });  
</script> 

http://api.jquery.com/next/

Answer 2

इस

<script type="text/javascript"> 
$(document).ready(function() { 
$(".toggleCommentBox").each(function{ 

    var getId = $(this).attr('getId'); 
    $(this).click(function(){ 

     $("#commentBox"+getId).toggle(); 
    }) 
    }) 
});  

<a href = "#" class = "toggleCommentBox" getId='1' >Leave a Comment</a> 

<div class = "commentBox" style = "display:none;" id="commentBox1"> 
...Form stuff in here 
</div> 

आशा है कि आप समझते हैं कि मैं टी कोशिश कर रहा हूँ की तरह कुछ की कोशिश करो ओ