0

こんにちは誰かがここで私を助けてくれますか？

私は次のことをしようとしています：

<table>
<thead> 
    <tr> 
        <th>Select</th> 
        <th>Name</th> 
    </tr>
</thead>    
<tr>
    <td>
        <input type="checkbox" class="toggle">
    </td>
    <td>
        Sam, Walls
    </td>
</tr>
<tr class="show">
    <td colspan="2">
        This is the info about Sam.
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" class="toggle">
    </td>
    <td>
        John, Doe
    </td>
</tr>
<tr class="show">
    <td colspan="2">
        This is the info about John.
    </td>
</tr>
</table>

class = "toggle"のチェックボックスをクリックすると、その下の行のみが表示されます。

うまく機能しない私のJavaScriptコードは次のとおりです。

$('.show').hide();
$('.toggle').click(function(){
    $('.show').slideToggle();
});

現在、Sam、Walls行のみを非表示にして切り替えます。

編集：IDの代わりにクラスを使用した後、非表示の問題は解決されたようです。ただし、1つのチェックボックスをクリックすると、両方の行が一緒に切り替わります。上記のコードを更新しました。

どんな助けでもいただければ幸いです！

乾杯。

4

2 に答える 2

2

コメントで、IDを重複させることはできず、それは#show要素にも当てはまると述べました。代わりにこの関数を使用して、nextどの項目を押しても次の要素が切り替わるようにします。何かのようなもの：

$('.show').hide();
$('.toggle').click(function(){
    $(this).closest('tr').next().slideToggle();
});
于 2013-02-13T20:59:27.743 に答える
1

クラスを使用して、クリックしたもののインデックスを使用して切り替えることができます...

$('.show').hide();
$('.toggle').click(function(){
    $('.show').eq($('.toggle').index(this)).slideToggle();
});
于 2013-02-13T21:11:38.153 に答える