C# jquery在asp.net数据列表中显示注释和可单击链接

我是一个新的程序员，第一次尝试使用jquery。我正在尝试设置一个简单的数据列表，用于显示项目的注释。我想要一个可点击的链接（每个数据列表行）来下拉一个有注释文本的面板（每个数据列表行）。因此，用户查看第1行，单击其链接以阅读注释，然后“注释”面板下拉。它们向下滚动，并对下一项执行相同的操作

到目前为止，我有下面的代码作为一个小测试页，但它不工作。基本上什么也没发生。我希望有人能帮助我，因为我是一个新手，只是从我在教程视频中看到的东西中自学这些东西。我尝试了clientID，因为我似乎需要它来处理自动生成的ID。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>

$（文档）.ready（函数（）{
$（'Panel1text'）.hide（）；
});
$（“#”）单击（函数（）{
$（“”）。显示（）；
});

身体部位

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

cid:


库塞：


博客ID:




显示文本

在我看来，您将拥有多个id为“HyperLink1”和“Panel1text”的元素。我建议改为使用类。将“class='link'”添加到link元素，将“class='panel'”添加到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

完全按照您在此处的指示进行了尝试，但当我单击链接时，什么也没有发生。我注意到你在这段代码中使用了clientID，这是一个错误吗？我应该在like.link.ClientID之后添加它吗？您可以“查看源代码”并发布正在呈现的HTML吗？我怀疑web窗体视图引擎呈现的不是我所期望的。一个简短的片段就能说明问题。