如何在中继器内隐藏/显示?

Question

我试图在锚点单击时隐藏/显示div，但这不起作用。

我有中继器，里面有很多帖子。有绑定图像、描述和注释(锚标记)。

当我单击评论时，将显示关联的div。

<a href="#" onclick="$('#<%= divSearch.ClientID%>').toggle('medium');return false;">Show Search</a>
<div class="widget-content" id="divSearch" runat="server" style="display: none; background-color: #EEEEEE;">Content goes here</div>

它在中继器项目模板之外完美运行，但是当我将其放置在中继器中时，它不起作用

Answer 1

给出的其他 2 个答案是忘记了中继器中有多个divSearch，因此您无法在 aspx 中直接访问它们。为此，您需要使用FindControl，这可以内联完成。您必须在容器中找到面板并获取该客户端 ID。

<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<asp:Panel ID="divSearch" runat="server" style="display:none">
<%# Eval("value") %>
</asp:Panel>
<a href="#" onclick="$('#<%# Container.FindControl("divSearch").ClientID %>').toggle('medium');return false;">Show</a>
</ItemTemplate>
</asp:Repeater>

Answer 2

我认为实现这一点的最干净方法是在ItemDataBound事件中。

标记

<a href="#" runat="server" id="showSearch">Show Search</a>
<div class="widget-content" id="divSearch" runat="server" style="display: none; background-color: #EEEEEE;">Content goes here</div>

事件

protected void repeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
var link = e.Item.FindControl("showSearch") as HtmlControl;
link.Attributes["onclick"] = $"$('{e.Item.FindControl("divSearch").ClientID}').toggle('medium'); return false;";
}
}

Answer 3

在模板控件中，您需要使用<%#而不是<%=：

<a href="#" onclick="$('#<%#Container.FindControl("divSearch").ClientID%>').toggle('medium');return false;">Show Search</a>