2013-03-22 17 views
5

私は自分の軽量ブログプラットフォームを作成しています(私はPHP & jQueryを覚えようとしていますので、Wordpressを使いたいだけではありません)。 PHPを使用して、ページごとに5つのブログ投稿を表示するページネーションシステムがあります。私のwhileループの中には、「コメントを残してください」というリンクがあります。このリンクをクリックすると、コメントを入力するテキストボックスを持つDIVが開きます。私が使用している現在のコードは、ページ上のすべての5つのコメントDIVを開きます。私は、これらのcommment DIVのそれぞれに固有のID(私が想定しているブログ投稿のIDに基づいて)を与えることができ、jqueryのトグル機能に入れて、リンクがクリックされたときにDIVが1つだけ開くようにする必要があります。それら。誰でも助けてくれますか?ここで動的に作成されたdivを切り替える

は、ページ上のすべての切り替えのdivを開く私のjQueryの:

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

そして、ここでブログの記事とリンクが表示され、私のwhileループ内のコードです:

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

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

IドンcommentBoxのdiv内のフォームに手助けが必要な場合は、ページ上の5つのコメントボックスをそれぞれ一意にするためにjQueryのヘルプが必要です。すべてが5つのトグルを開く1つのリンクではなく、個別にトグル可能ですページ上のDIVは、今起こるようなものです。誰かが私に与えることができるどんな助けも大いに感謝されるでしょう。

答えて

2

使用jqueryの次の機能:

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

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

+1

ありがとう、これは完全に動作します! –

+0

良い仕事。どのようにfontawesomeのようなオープン/クローズアイコンを追加するのですか? – Perspolis

4

この

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

はあなたが私はトンをしようとしていますかを理解ホープのようなものを試してみてくださいo say

+0

ありがとう!私はBaseratiの答えを使っています。ちょっと単純です。それにもかかわらずありがとうございます:) –

関連する問題