2

トグルテーブルを持つという特定の要件があります。トグルとは、ハイパーリンクのイベントクリックで展開および折りたたまれるテーブルを意味します。

私がテーブルを作成した方法のスニペットは次のとおりです。

     <table class=".table" border="1">
     <tr id="1">
        <td><a href="#" class="action" id="a-1">+</a></td>
        <td>Superman</td>
     </tr>
     <tr id="version" class="child 1">
        <td></td>
        <td>Weight</td>
     </tr>
     <tr id="type" class="child 1">
        <td></td>
        <td>Height</td>
     </tr>
     <tr id="pl-id" class="child 1">
        <td><a href="#" class="action" id="a-1-101">+</a></td>
        <td>Planet</td>
     </tr>
     <tr id="KP" class="child 1-101">
        <td></td>
        <td>KP</td>
     </tr>
     <tr id="MN" class="child 1-101">
        <td></td>
        <td>MN</td>
     </tr>
     ..
     ..

テーブルは並べ替えの構造を持つと想像できます

1)  - Superman
        Weight
        Height
        - Planet
            KP
            MN


2)  + Superman


3)   - Superman
          - Planet
              KP
              MN

1 番目の状態でスーパーマンをクリックする-と、3 番目の状態ではなく 2 番目の状態になります。

これを行うために私が書いたJQuery：

$().ready(function() {
            $('.child').hide();
            $('.action').click(function(){

                var id = $(this).attr('id');
                var idarray=id.split("-");
                var len = idarray.length;

                if(len==2)
                    {
                        id = id.substring(2);

                        if($(this).parent().parent().next().attr('style')=="display: none; "){
                            $('tr[class^=child '+id+'-1]').hide();
                            $('tr[class=child '+id+']').show();
                        }
                        if($(this).parent().parent().next().attr('style')=="display: table-row; "){
                            $('tr[class^=child '+id+'-1]').hide();
                            $('tr[class=child '+id+']').hide();
                        }

                    }
                else if(len==3)
                    {
                        //HAVEN'T REACHED TILL RESOLVING FOR 3 :(
                        /*id = id.substring(2);
                        alert(id);
                        $("."+id).toggle();
                        $('tr[class^=child '+id+']').hide();
                        $('tr[class=child '+id+']').show();*/

                    }
            });
        });

ハイパーリンクをクリックしてこのJQueryを使用すると実行されますが、内部の表示/非表示機能により、ブロックid=a-1 display:none blockが自動的にトリガーされます。display:table-row再クリックが発生しないのに、なぜクリック イベントが再度シミュレートされるのですか。display:table-row ブロックを実行したくありません。現在、テーブルは 2 番目の状態にあり、HTML ページがロード+され、Superman をクリックした後でも、if 条件と else 条件の両方が評価されて元の状態に戻るため、同じ状態のままです。

この要件を簡単に達成するにはどうすればよいでしょうか。私はJQueryが初めてで、非常に多くのことを試みたので、完全に混乱しています。誰かがこれを行う方法を教えてください。実用的または実用的な解決策を教えてください。ドキュメントへのリンクを提供しないでください。

ありがとう。

4

2 に答える 2

2

問題はあなたの参照にあります。JQuery は Sizzle セレクターを使用することに注意してください。これにより、基本的に CSS スタイルの要素参照が可能になります。

この種の参照は機能しません。

$('tr[class=child '+id+']').show();

属性リスト セレクターを使用する必要があります。

$('tr[class~=child][class~='+id+']').show();

または、CSS クラスを扱っているため、さらに優れています (あいまい一致が必要な場合を除き、ID またはクラスに属性セレクターを使用しないでください)。

$('tr.child.'+id).show();

そうは言っても...実装を確認することを強くお勧めします。半非表示の行を含むテーブルを利用する代わりに、コンテナ オブジェクトを使用します。コードを大幅に簡素化し、更新を容易にします。あなたがそれを持っているように...まあ、介入してそれを維持しようとする次の男が気の毒です。

于 2012-07-01T00:29:37.800 に答える
0

私のスクリプトを次のように変更しました

    $('.action').click(function(){

            var id = $(this).attr('id');    
            var idarray=id.split("-");
            var len = idarray.length;
            id = id.substring(2);

    if($(this).parent().parent().next().attr('style')=="display: none; "){
            $('tr[class=child '+id+']').show();
            $('tr[class^=child '+id+'-]').show();
            return false;
    }
    if($(this).parent().parent().next().attr('style')=="display: table-row; "){
            $('tr[class=child '+id+']').hide();
            $('tr[class^=child '+id+'-]').hide();
            return false;
    }

これで問題なく動作します。私の問題を解決した行はreturn false;. 副作用の JQuery イベントを停止しました。

John Greenからの情報提供を受けて、さらに検討が加えられ、機能するようになり、ぎこちなくなりました。

于 2012-07-01T08:07:26.577 に答える