javascript - ボタンのクリック時に要素を表示/非表示

Question

私はこのようなテーブルを得ました：

<tr>
    <td class="title">Title</td>
    <td class="body">Body</td>
    <td class="any">Any text</td>
</tr>
<tr>
    <td class="title">Title</td>
    <td class="body">Body</td>
    <td class="any">Any text</td>
</tr>
<tr>
    <td class="title">Title</td>
    <td class="body">Body</td>
    <td class="any">Any text</td>
</tr>

このスクリプトを使用して td="body" を非表示/表示しています

$('.title').append("<button class='moredrop'>&darr;</button>");
$(".moredrop").click(function(){
    $(".body").toggle();

テーブル内のすべての td を表示および非表示にします。次のように、この td のみを非表示/表示したい:

     $("tr").toggle(
    function(){$(".body",this).css("display","block");},
    function(){$(".body",this).css("display","none");});

しかし、ボタンをクリックすると。何か案は？

Answer 1

含まれている TR を検索し、特定の .body に移動します

$('.moredrop').on('click', function () {
    $(this).closest('tr').find('.body').toggle();
});

Answer 2

これを試して ：

$(document).ready(function(){
    $('.title').append("<button class='moredrop'>&darr;</button>");
    $('tr').on('click','.moredrop',function(){
            $(this).parents('tr').children('.body').toggle();
    });
});

これが動作デモです。

Answer 3

$('.moredrop').click(function(){
    $('td.body').toggle();
});