Question

我正在从数据库加载数据。我想在使用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");
    });

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

如何点击每个项目并在点击时显示相关内容。请帮助!!

Answer 1

你可以使用类，

<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
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的商品在客户端没有相同的ID。您可以使用此jquery行调用它们：

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

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

跟踪asp.net中datalist中的标签ID

2 个答案: