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

Tracking label's id in datalist in asp.net

本文关键字：跟踪 标签 ID net 数据 列表 asp      更新时间：2023-09-26

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

我的数据列表是

 <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 对于数据列表中的每个项目都是相同的。因此，只有点击时的第一个项目显示内容，而其余项目在点击时根本没有反应。

如何使每个项目可点击并在点击时显示相关内容。请帮忙！！

您的项目在客户端上没有相同的 ID。你可以用这个jquery行调用它们：

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

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

你可以

使用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尝试中，

$(".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>

相关文章：