2

現在、いくつかのテーブル行を非表示にして、リンクがクリックされたときにそれらを表示および非表示にするトグルリンクを作成しようとしています。現在は機能していますが、同じコードの束を異なるクラス名（またはID）でコピーして貼り付けるのではなく、関数を完全に汎用にする簡単な方法があるかどうか疑問に思いました。私がJS/Jqueryについて理解していることから（これは私がJS / JQueryを行うのは初めてであり、私は通常バックエンド開発者です）、テーブルを使用することはおそらく最も賢明な考えではないように見えますが、私は変更しています元のコード。テーブル以外のものを使用する必要がある場合は書き直しますが、それが不可能な場合は方向性が必要です

<table>
    <tr>
        <th>Some stuff</th>
        <a href="#" class="hide link1">Show/Hide</a>
    </tr>
    <tr class="show hide row1">
        <th>Random data</th>
    </tr>
        <tr>
        <th>Some stuff2</th>
        <a href="#" class="hide link2">Show/Hide</a>
    </tr>
    <tr class="show hide row2">
        <th>Random data2</th>
    </tr>
        <tr>
        <th>Some stuff3</th>
        <a href="#" class="hide link3">Show/Hide</a>
    </tr>
    <tr class="show hide row3">
        <th>Random data3</th>
</table>

<script>
    $(".hide link1").click(function(){
        $(".show hide row 1").toggle(400)
    });
    $(".show hide row 2").hide()
    $(".hide link2").click(function(){
        $(".show hide row 2").toggle(400)
    });
    $(".show hide row 2").hide()
    $(".hide link3").click(function(){
        $(".show hide row3").toggle(400)
    });
    $(".show hide row3").hide()
</script>
4

1 に答える 1

2

DOMをトラバースできます。

$(function() {
    $("table a.hide").click(function(e){
        e.preventDefault();
        $(this).closest('tr').next('tr.show').toggle(400);
    });
});

jQueryセレクターはCSSセレクターのように機能するため、セレクターは次のようになります。

$(".show.hide.row2").hide();

それ以外の：

$(".show hide row 2").hide();

疑似要素を選択して非表示にするもの2：

<tr class='show'>
   <hide>
       <row>
          <2>Come-on!</2>
       </row>
   </hide>
</tr>
于 2013-03-11T21:39:52.333 に答える