1

私はこのHTMLを持っています:

<table class="itemsTable table table-striped table-condensed table-hover">
    <thead>
    <tr>
        <th>#</th>
        <th>Location</th>
    </tr>
    </thead>
    <tbody>

    <tr class="collapse">
        <td class="center">1</td>
        <td>
            <a href="locations?location_id=1">Title 1</a>
        </td>
    </tr>

    <tr class="collapse">
        <td class="center">2</td>
        <td>
            <a href="locations?location_id=2">Title 2</a>
        </td>
    </tr>

    <tr class="collapse">
        <td class="center">3</td>
        <td>
            <a href="locations?location_id=3">Title 3</a>
        </td>
    </tr>

    </tbody>
</table>
<a href="#" class="collapseBtn">test</a>

そしてjQuery：

$('.collapseBtn').on('click', function(e) {
    e.preventDefault(); 
    var $this = $(this);
    var $collapse = $this.closest('.itemsTable').find('.collapse');
    $collapse.collapse('toggle');
});

リンクのクリック時に行の表示/非表示の動作が必要です。なにが問題ですか？

4

2 に答える 2

2

$.closest は、一致する要素の dom ツリーを検索します - .itemsTable は親ではない.collapseBtnため、$this.closest('.itemsTable')どの要素とも一致しません。

したがって、.collapseBtn表内にを入れるか、$this.prev()代わりに を使用してください$this.closest('.itemsTable')。

$('.collapseBtn').closest('.itemsTable')コンソールで実行して、一致する要素があるかどうかをテストできます

于 2013-09-18T17:24:30.180 に答える
1

130918_1100PST 現在、選択された回答は正しくありません。ライターは、closest()セレクターが折りたたむ要素を返さない理由を正しく特定しましたが、これだけでは OP の問題は解決しませんでした。

このセレクターは、折りたたむ要素を選択する場合にも機能します。

$('.collapse').methodgoeshere();

しかし、要素は展開/折りたたまれません。これは、使用されているセレクタの問題だけではありません。

ユーザー Chad が benjaminbenben の回答の下にある jsFiddle で特定したように、問題を解決するための鍵は、実際には間違った方法が使用されたことです。

これはうまくいきませんでした：

selector.collapse('toggle');

これは次のことを行いました：

selector.toggle();

したがって、正解は次のとおりでした。

$('.collapseBtn').on('click', function() {
    $('.collapse').toggle();
});

jsFiddle here

于 2013-09-18T17:57:45.160 に答える