2013-03-22 11 views
5

Sto scrivendo la mia piattaforma di blogging leggera (sto cercando di imparare PHP & jQuery quindi non voglio solo usare Wordpress). Usando PHP, ho un sistema di impaginazione che mostra 5 post di blog per pagina. Nel mio ciclo while, voglio avere un link che dice "Leave a Comment" che, quando cliccato, aprirà un DIV che ha una casella di testo per inserire un commento. Il codice corrente che sto usando apre TUTTI i 5 commenti DIV sulla pagina. Devo essere in grado di assegnare a ciascuno DIV un DIV un ID univoco (basato sull'ID del post del blog presumo) e inserirlo nella mia funzione jquery di commutazione in modo che venga aperto un solo commento DIV quando si fa clic sul collegamento, non tutti loro. Qualcuno può aiutarmi?Attivare le immersioni create dinamicamente

Ecco la mia jQuery che si apre TUTTI div attivata la pagina:

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

Ed ecco il codice nel mio ciclo while che visualizza il post sul blog e il link:

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

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

I don Ho bisogno di aiuto con il materiale del form all'interno del commentBox div, ho solo bisogno di aiuto con il jQuery per rendere ognuno dei 5 riquadri di commento sulla pagina univoci, e ognuno di essi può essere attivato singolarmente, invece di un collegamento che apre tutti e 5 i commutatori DIV sulla pagina, come quello che succede ora. Qualsiasi aiuto che qualcuno potrebbe darmi sarebbe molto apprezzato.

risposta

2

utilizzare jQuery funzione successiva:

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

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

+1

Grazie, funziona perfettamente! –

+0

buon lavoro. come aggiungere un'icona di apertura/chiusura come fontawesome? – Perspolis

4

provare qualcosa di simile

<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> 

Spero che tu capisca quello che sto cercando t o say

+0

Grazie! Sto usando la risposta di Baserati perché è un po 'più semplice. Grazie comunque :) –

Problemi correlati