5

私は独自の軽量のブログ プラットフォームを作成しています (PHP と jQuery を学ぼうとしているので、Wordpress だけを使いたくないのです)。PHP を使用して、ページごとに 5 つのブログ投稿を表示するページネーション システムがあります。while ループ内に、「コメントを残す」というリンクが必要です。これをクリックすると、コメントを入力するためのテキスト ボックスを持つ DIV が開きます。私が使用している現在のコードは、ページ上のすべての 5 つのコメント DIV を開きます。これらのコメント DIV のそれぞれに一意の ID (私が推測するブログ投稿の ID に基づく) を与え、それを jquery トグル関数に入れて、リンクがクリックされたときにすべてではなく 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>

commentBox div 内のフォームに関するヘルプは必要ありません。jQuery を使用して、ページ上の 5 つのコメント ボックスをそれぞれ固有のものにし、すべてのコメント ボックスを 1 つのリンクですべて開くのではなく、すべてを個別に切り替えられるようにする必要があるだけです。 5 ページの DIV をトグルします。誰かが私に与えることができるどんな助けも大歓迎です。

4

2 に答える 2

6

このようなものを試してください

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

私が言おうとしていることを理解していただければ幸いです

于 2013-03-22T05:53:42.573 に答える
4

jquery の次の関数を使用します。

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

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

于 2013-03-22T05:45:45.483 に答える