使用jQuery和ASP.NET控件的多个控件实例

<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>

As you can see from the above I am trying to achieve a collapsible panel. However the above will only work once. How can I make this accessible to multiple controls, i.e. if I have 10 panels on a page?

从上面你可以看到我试图实现一个可折叠的面板。但是上面只会工作一次。如何让多个控件可以访问它,即如果页面上有10个面板?

Thanks guys!

3 个解决方案

#1

Try this:

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

If you select by ID (e.g., #pHeader), you'll only affect one node, since IDs are meant to be unique. Classes are meant to be assigned to multiple nodes.

如果您按ID选择(例如#pHeader),则只会影响一个节点,因为ID应该是唯一的。类要分配给多个节点。

Also note the shortened first line, which jQuery provides as a shortcut for $(document).ready().

还要注意缩短的第一行,jQuery提供了$(document).ready()的快捷方式。

#2

I guess you have to use $('.pHeader') and $('.pBody') instead of $('#pHeader') and $('#pBody') if you assign the CSS class pHeader to every Panel.

如果你为每个Panel分配CSS类pHeader,我想你必须使用$('。pHeader')和$('。pBody')而不是$('#pHeader')和$('#pBody')。

The "#" character selects an element with the id after the "#" sign. The "." is used to get all elements to which you apply a certain CSS class name.

“#”字符选择“#”符号后面带有id的元素。 “。”用于获取应用某个CSS类名称的所有元素。

So, code this should work:

所以,代码应该工作:

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

#3

Hi the main problem you have with ASP.NET is that the controls will create a custom client side ID for each element when within a custom control. To avoid this trap, place the code you have inside an ascx custom control like this, putting serverside inline code to write out the custom client id. this way you can have multiple controls all working independently.

您遇到的主要问题是,控件将在自定义控件中为每个元素创建自定义客户端ID。要避免此陷阱,请将您拥有的代码放在ascx自定义控件中,并将服务器端内联代码写入自定义客户端ID。通过这种方式,您可以让多个控件全部独立工作。

<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>



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

#1