jquery для отображения комментариев и кликабельной ссылки в списке данных asp.net

Question

Я - новый кодер, пытающийся экспериментировать с jquery в первый раз. Я пытаюсь настроить простой список данных, который может быть использован для отображения комментариев для элемента. Я хочу, чтобы активная ссылка (для каждой строки списка данных) раскрывала панель (для каждой строки списка данных) с текстом комментария. поэтому пользователь просматривает строку 1, щелкает ее ссылку, чтобы прочитать комментарии, и панель комментариев выпадает. они прокручивают вниз и делают то же самое для следующего элемента.

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

очень ценю ваше время и усилия.

Головная секция

<script src="jquery-1.4.4.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
       $('Panel1text').hide(); 
    });

    $("#<%=HyperLink1.ClientID%>").click(function() {
        $("<%=Panel1text.ClientID%>").show();
    });
</script>

корпус

    <asp:DataList ID="DataList1" runat="server" DataKeyField="cid" 
        DataSourceID="SqlDataSource1" Width="645px">
        <ItemTemplate>
            cid:
            <asp:Label ID="cidLabel" runat="server" Text='<%# Eval("cid") %>' />
            <br />
            cuser:
            <asp:Label ID="cuserLabel" runat="server" Text='<%# Eval("cuser") %>' />
            <br />
            blogid:
            <asp:Label ID="blogidLabel" runat="server" Text='<%# Eval("blogid") %>' />
            <br />
            <br />
            <asp:HyperLink ID="HyperLink1" runat="server">show text</asp:HyperLink>
            <br />
            <asp:Panel ID="Panel1text" runat="server">
                <asp:Label ID="textLabel" runat="server" Text='<%# Eval("text") %>' />
            </asp:Panel>
            <br />
        </ItemTemplate>
    </asp:DataList>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
        SelectCommand="SELECT * FROM [ocomments]"></asp:SqlDataSource>

Answer 1

Мне кажется, что у вас будет несколько элементов с идентификатором HyperLink1 и Panel1text.Я бы рекомендовал вместо этого использовать классы.Добавьте "class = 'link'" к элементу link и "class = 'panel'" к элементу панели.Используйте следующий CSS для первоначального скрытия панелей:

.panel { display: none; }

Затем используйте следующий jQuery для отображения элемента:

$(document).ready(function(){

   $(".link").click(function(evt){
      evt.preventDefault(); // prevents the click from leaving the page

      $(this).next().show(); // show the panel

   });

});

Возможно, вам придется поиграться с '.next ().show () 'немного селектор.Не знаю, как ASP.NET будет отображать элементы.

Bob