jQueryとASP.NETコントロールを使用する複数のコントロールインスタンス

Question

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#pHeader').click(function() { 
      $('#pBody').slideToggle('fast'); 
     }); 
    }); 
</script> 

<asp:Panel ID="pHeader" runat="server" CssClass="cpHeader"> 
    <asp:Label ID="lblText" runat="server" Text="Header" /> 
</asp:Panel> 

<asp:Panel ID="pBody" runat="server" CssClass="cpBody"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna 
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
    ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur 
</asp:Panel> 

上記からわかるように、折りたたみ可能なパネルを実現しようとしています。しかし、上記は一度しか動作しません。複数のコントロールにアクセスできるようにするにはどうすればよいですか？ページに10個のパネルがある場合

ありがとうございました！

Answer 1

はこれを試してみてくださいユニークであることを意味します。クラスは複数のノードに割り当てられます。

また、短縮された第1行は、jQueryが$(document).ready()のショートカットとして提供することにも注意してください。

Answer 2

は、私はあなたがすべてのパネルにCSSクラスpHeaderを割り当てた場合$('.pHeader')と$('.pBody')の代わりに、$('#pHeader')と$('#pBody')を使用する必要がありますね。

"＃"文字は、 "＃"記号の後にidを持つ要素を選択します。 "。"特定のCSSクラス名を適用するすべての要素を取得するために使用されます。

ので、これは動作するはずコード：あなたはID（例えば、#pHeader）で選択した場合のIDであるため、あなただけの、一つのノードに影響を与えます

$(function(){ 
    $('.cpHeader').click(function() { 
    $(this).next('.cpBody').slideToggle('fast'); 
    }); 
}); 

：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.pHeader').click(function() { 
     $('.pBody').slideToggle('fast'); 
    }); 
}); 
</script> 

Answer 3

こんにちは、ASP.NETでの主な問題は、コントロールがカスタムコントロール内で各要素のカスタムクライアントサイドIDを作成することです。このトラップを避けるには、このようなascxカスタムコントロールの中にコードを置き、serversideインラインコードを入れてカスタムクライアントIDを書き出します。このようにして、複数のコントロールをすべて独立して動作させることができます。