在asp.net的数据列表中跟踪标签的id

Question

我正在从数据库加载数据。我希望使用jquery的slideToggle在单击标题时显示内容。

我的datalist是

 <asp:DataList ID="dl_news" runat="server">
   <ItemTemplate>
     <asp:Label ID="ntitle" runat="server" ClientIDMode="Static"  Text='<%#Eval("title")%>'> </asp:Label> </br>
     <asp:Label  ID="ncontent" runat="server" ClientIDMode="Static"   style=" display:none; " Text ='<%#Eval("ncontent")%>'> </asp:Label>
   </ItemTemplate>

  </asp:DataList>

而我的js是

 $("#ntitle").click(function () {
        $("#ncontent").slideToggle("fast");
    });

问题是标题和内容的标签id对于datalist中的每一项都是相同的。正因为如此，只有点击时的第一个项目显示了内容，而其余的项目在点击时根本没有反应。

如何使每个项目都可点击并在clicking.Please帮助中显示相关内容！！

Answer 1

你可以像这样使用class，

<ItemTemplate>
     <asp:Label ID="ntitle" class="ntitle" runat="server" ClientIDMode="Static"  Text='<%#Eval("title")%>'> </asp:Label> </br>
     <asp:Label  ID="ncontent" class="ncontent" runat="server" ClientIDMode="Static" style=" display:none; " Text ='<%#Eval("ncontent")%>'> </asp:Label>
</ItemTemplate>

在Jquery try中，

$(".ntitle").click(function () {
    $(".ncontent").hide(); // first hide all
    $(this).next(".ncontent").slideDown("fast"); // slide its content, only
});

​

$(".ntitle").click(function() {
  $(".ncontent").hide(); // first hide all
  $(this).next(".ncontent").slideDown("fast"); // slide its content, only
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label class="ntitle">First title</label>
  <label class="ncontent" style="display:none">First ncontent</label>
</div>
<div>
  <label class="ntitle">Second title</label>
  <label class="ncontent" style="display:none">Second ncontent</label>
</div>
<div>
  <label class="ntitle">Third title</label>
  <label class="ncontent" style="display:none">Third ncontent</label>
</div>

​

Answer 2

您的项目在客户端不具有相同的Id。您可以使用下面的jquery行调用它们：

$('#<%= dl_news.FindControl("ntitle").ClientID %>').click(function () { 
    ...
});

/edit:但是不应该使用静态的ClientIDMode，因为这会生成无效的Html。所有子控件都将具有相同的ID。您应该在子控件上使用ClientIDMode="Predictable"。