1

[詳細]ボタンがクリックされたときにテーブルの行をslideToggleしようとして、1週間以上試しましたが、何も機能していないようです。

私はJqueryを初めて使用するので、誰かが「more-info-1」、「more-info-2」、「more-info-3」のtrタグをslideToggleするのを手伝ってくれたら。主な問題は、これらのIDがphpを介して動的に作成され、「more-info-」などを使用するなど、Jqueryでそれらを選択する方法がわからないことです。

この例のように機能させたいと思い ます。もちろん、ここからiframeを差し引いたものです。

ユーザーが[詳細]ボタンをクリックすると、[詳細]trが下にスライドします。

ページソースは次のとおりです:(StackOverFlowにHTMLを正しく挿入する方法がわかりません。特別な方法がありますか？コードボタンはHTMLでは正しく機能しません）

    html

div id="output-listings"

    div class="main-info"

        table class="listings"

            tbody

                    tr id="more-info-1" class="mi-1"

                        td

                        div id="more-1" class="more-information"/div

                        /td

                    /tr

                    tr id="main-info-1"

                        tdLeftlane News/td

                        tdwww.leftlanenews.com//td

                        tda id="link-1" class="more-info-link" href="#"More info/a/td

                    /tr

                    tr id="more-info-2" class="mi-2"

                        td

                        div id="more-2" class="more-information"/div

                        /td

                    /tr

                    tr id="main-info-2"

                        tdMotor Authority/td

                        tdwww.motorauthority.com/ /td

                        tda id="link-2" class="more-info-link" href="#"More info/a/td

                    /tr

                    tr id="more-info-3" class="mi-3"

                        td

                        div id="more-3" class="more-information"/div

                        /td

                    /tr

                    tr id="main-info-3"

                        tdAutoblog/td

                        tdhttp://www.autoblog.com//td

                        tda id="link-3" class="more-info-link" href="#"More info/a/td

                    /tr

            /tbody

        /table

    /div

/div!--end output-listings--

/html

助けていただければ幸いです。

4

5 に答える 5

1

クレイグの応答は機能しますが、コードを制限して、jquery が特定のスコープ内のすべての TR 要素を取得できるようにし、彼が提案したように id を解析することができます。

$(".listings tbody tr").each(function(index) {
    // hide by default
    $(this).css({'display': 'none'});


    // set the onclicks
    $(this).click(function() {
      // your dosomething can change your appearance
      dosomething(the_id_you_parse_out);
    });
});

それが機能するコードかどうかはわかりませんが、jquery のセレクターの使用方法の要点を理解できるようにまとめてみました。

于 2009-07-16T01:16:27.197 に答える
0

jqueryコードは通常DOMの準備ができたときにのみ実行されるため、最初にCSSを使用して非表示にしない場合は、jsコードが非表示になるまで1ミリ秒でもTRが常に表示されます。

したがって、ここの貢献者のほとんどはおそらくあなたの質問に答えました。最初にCSSを使用してTRを非表示にし、その後JSを使用して残りを実行できることを付け加えたいと思います。

経験則として、CSSのみを使用して「デフォルト」のページビューを取得し、jqueryコードで豊富な機能を追加することをお勧めします。または、少なくともそれは私がすることです。

于 2009-07-27T21:42:49.937 に答える
0

一見すると、このようなものが欲しいように見えます。

$('#link-1').click(function(){
    $('#more-info-1').slideToggle()
})

クラスの設定方法を変更するか、内部関数でクリックされたリンクの数を解析し、それを内部 jQuery 呼び出しにフィードすることで、このスクリプトを一般化して 3 つすべてで動作するようにすることもできます。

$('.more-info-link').click(function(){
    var id = $(this).attr('id');
    var num = id.substr(id.length-1,1);
    $('#more-info-'+num).slideToggle();
})
于 2009-07-13T19:49:08.500 に答える
0

別の目的で要素に特定の ID を割り当てる必要があるかどうかによって、個々の ID を指定しなくても実際にこれを行うことができます。

この例では、ロード時にまずクラスがトグル可能な tr を非表示にします。次に、jQuery に dom を数レベル上にジャンプさせ、次の tr を非表示にするように指示します。これにより、id を呼び出す必要がなくなります。

このための jQuery の例:

$(document).ready(function(){

$("#tableToggle tr.toggleable").hide();

$("#tableToggle .tableToggleButton").click(function(){
    $(this).parent().parent().next('tr').slideToggle();                                                 
});

});

変更されたテーブルの例:

<table id="tableToggle">
<tbody>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
</tbody>
</table>
于 2009-07-20T04:52:03.840 に答える