-4

含まれている div (投稿) の返信テキスト ボックスを切り替える HTML コードを動的に記述しようとしています。PHP を使用して各 div (投稿) を動的に出力し、それぞれを一意にリンクできないため、これは負担になっています。各divの返信ボタン。

jQuery

$("#reply").click(function(){
  $("#box").toggleClass("hidden");
});

CSS

.hidden{
  display: none;
}

最初の投稿のみが機能します。

4

2 に答える 2

1

まず第一に、それぞれに返信ボタンがある場合は、div実際にクラスを使用する必要があります。

idは各ページに固有であると想定されていますが、クラスは複数のインスタンスを持つように設計されています。

何が起こっているのかというと、あなたの jQuery セレクター$("#reply")は、最初のものを見つけて#replyそこで停止しています。$("#box")セレクターでも同じことが起こっています。#replys と#boxes を切り替えて、クラスを作成します。<div class="reply">、次にセレクターを使用し$(".reply")ます。#boxes でも​​同じ問題が発生します。

HTML の例がなければ、ここで行うべき最善の方法についてアドバイスすることはできません。しかし、ここに汎用ソリューションがあります：

JS フィドル
http://jsfiddle.net/Nveea/

HTML

<div id="reply-1" class="reply">Reply</div>`
<div id="box-1" class="box">box 1</div>
<hr />
<div id="reply-2" class="reply">Reply</div>
<div id="box-2" class="box">box 2</div>

CSS

.box
{
    display:none;
}​​

JavaScript

$(".reply").click(function(){
    //get the associated box
    var index = $(this).attr("id").replace("reply-","");

    //toggles show and hide
    $("#box-" + index).toggle(); 
});

上記のソリューションでは、PHP である種の for ループを使用しており、反復インデックスを各replyandbox要素に挿入できると想定しています。HTML の例を提供すると、より良い解決策を提供できます。

toggle()また、要素を display:hidden/block との間で切り替えるjQuery 関数の使用をお勧めします。あなたの場合、これは .toggleClass("hidden") よりも優れているかもしれません。

于 2012-12-25T08:51:15.503 に答える
0

ボタンの作成中に、クリックしたときにその ID を取得できるように、各ボタンに ID とクラスを指定します。関数を書く:

$(".class").live("click",function(){
   var id=$(this).attr('id');
   $(id).insertAfter($("#box").show()); 
});
于 2012-12-25T08:55:55.310 に答える