Несколько экземпляров элементов управления с использованием элементов управления 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

Попробуйте это:

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

Если вы выбираете по идентификатору (например, #pHeader), вы затронете только один узел, поскольку идентификаторы должны быть уникальными. Классы предназначены для назначения нескольким узлам.

Также обратите внимание на укороченную первую строку, которую jQuery предоставляет в качестве ярлыка для $(document).ready().

Answer 2

Полагаю, вам нужно использовать $('.pHeader') и $('.pBody') вместо $('#pHeader') и $('#pBody'), если вы назначаете класс CSS pHeader для каждой панели.

Символ "#" выбирает элемент с идентификатором после знака "#". "." используется для получения всех элементов, к которым вы применяете определенное имя класса CSS.

Итак, код это должно работать:

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

Answer 3

Привет, основная проблема, с которой вы столкнулись в ASP.NET, заключается в том, что элементы управления будут создавать пользовательский идентификатор на стороне клиента для каждого элемента в рамках пользовательского элемента управления. Чтобы избежать этой ловушки, поместите свой код в пользовательский элемент управления ascx, например, так, чтобы встроенный серверный код выписывал пользовательский идентификатор клиента. таким образом, вы можете иметь несколько элементов управления, работающих независимо друг от друга.

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