jquery - jQuery トグル表示/HTML テーブル内のフォームの非表示

Question

私はこのフィドルを持っています: http://jsfiddle.net/2nAEZ/3/

アイデアは非常に単純です...ページが表示されると、タグ内のすべての要素が非表示になります。「返信」ボタン以外。

「返信」ボタンをクリックすると、フォームに「キャンセル」ボタンが表示されます。

しかし、「返信」ボタンを各行で機能させるにはどうすればよいですか？[返信] ボタンをクリックしたときにすべてのフォームが表示されるわけではありません。ありがとうございました。

Answer 1

このjsFiddle の例を試してください。HTML をクリーンアップし (重複 ID なし)、行単位で動作するように jQuery を変更しました。

jQuery

$("form, .hide").hide();
$(".show").click(function() {
    $(this).parents('tr').find("form,.hide").show();
    $(this).parents('tr').find(".show").hide();
});
$(".hide").click(function() {
    $(this).parents('tr').find("form, .hide").hide();
    $(this).parents('tr').find(".show").show();
});​

HTML

<table><tr>
    <td>12345</td>
    <td>message here<br>
        <form action="" method="post">
        <textarea></textarea>
        <input type="button" value="Send">
        </form></td>
    <td>
        <button class="hide">Cancel</button>
        <button class="show">Reply</button>
    </td>
</tr>
<tr>
    <td>67890</td>
    <td>another message here<br>
        <form action="" method="post">
        <textarea></textarea>
        <input type="button" value="Send">
        </form></td>
    <td>
        <button class="hide">Cancel</button>
        <button class="show">Reply</button>
    </td>
</tr></table>

</p>

Answer 2

同じ ID を持つ要素を複数持つことはできません! フォームは PHP によって生成されるため、

<button class="hide" data-form="<?=$form_number?>">Cancel</button>
<button class="show" data-form="<?=$form_number?>">Reply</button>

それから、

$("form, .hide").hide();
$(".show").click(function(){
   formnum = $(this).data("form");
   $("form"+formnum+", .hide").show();
   $('.show[data-form="'+formnum+'"').hide();
});

$(".hide").click(function(){
   formnum = $(this).data("form");
   $("form"+formnum+", .hide").hide();
   $('.show[data-form="'+formnum+'"').show();
});

同じクラスの要素を複数持つことができます。

Answer 3

それぞれを個別に制御したい場合は、次のようにします。

js:

$(document).ready(function(){
    $("form, #hide").hide();

    $("#show1").click(function(){
    $("#form1, #hide1").show();
    $("#show1").hide();
    });

    $("#hide1").click(function(){
    $("#form1, #hide1").hide();
    $("#show1").show();
    });
});​

html:

<tr>
    <td>12345</td>
    <td>message here<br>
        <form id="form1" action=\"\" method=\"post\">
        <textarea></textarea>
        <input id="reply1" type="button" value="Send">
        </form></td>
    <td>
        <button id="hide1">Cancel</button>
        <button id="show1">Reply</button>
    </td>
</tr>
<br>
<tr>
    <td>67890</td>
    <td>another message here<br>
        <form id="form2" action=\"\" method=\"post\">
        <textarea></textarea>
        <input id="reply2" type="button" value="Send">
        </form></td>
    <td>
        <button id="hide2">Cancel</button>
        <button id="show2">Reply</button>
    </td>
</tr>​

2 番目のフォームを制御するには、追加の js が必要です。