我有以下代码:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script src="Js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#propertyimage").mouseover(function () {
$("#lnkedit").hide();
});
$("#propertyimage").mouseout(function () {
$("#lnkedit").show();
});
});
</script>
<div class="ddldemo">
<asp:Repeater ID="rptproperty" runat="server">
<ItemTemplate>
<div style="width: 165px;">
<asp:Image ID="propertyimage" runat="server" ImageUrl='<%#Eval("image1") %>'" />
<asp:LinkButton runat="server" ID="lnkedit" Text="Edit"></asp:LinkButton>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</asp:Content>
所有代码都在内容占位符中 当我将鼠标移到图像按钮时,不会隐藏/显示。
我该如何解决这个问题?
答案 0 :(得分:2)
问题是您的元素没有ID。代码中的ID属性是服务器端ASP.NET ID,它不是HTML ID属性。对于客户端ID,请使用ClientID
:
<asp:Image ID="propertyimage" ClientID="propertyimage" runat="server" ImageUrl='<%#Eval("image1") %>'" />
与您的LinkButton相同:
<asp:LinkButton runat="server" ID="lnkedit" ClientID="lnkedit" Text="Edit"></asp:LinkButton>
调试这样的代码时,请记得在浏览器中查看源代码,以查看浏览器正在接收的实际HTML。
如果你有多个,那么固定的ID不会起作用,但它必须是唯一的。在这种情况下,您将需要使用其他类似的东西,但是您还需要添加逻辑来获取相对于图像的按钮。
答案 1 :(得分:1)
小心,我不太了解ASP,但我看到&#34;模板&#34;和&#34;转发器&#34;?因此,您似乎很有可能使用相同的ID创建多个输入。
试试这个:
<script src="Js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#propertyimage").mouseover(function () {
$(this).next().hide();
});
$("#propertyimage").mouseout(function () {
$(this).next().show();
});
});
</script>
<div class="ddldemo">
<asp:Repeater ID="rptproperty" runat="server">
<ItemTemplate>
<div style="width: 165px;">
<asp:Image class="propertyimage" runat="server" ImageUrl='<%#Eval("image1") %>'" />
<asp:LinkButton runat="server" class="lnkedit" Text="Edit"></asp:LinkButton>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
答案 2 :(得分:1)
当你在ItemTemplate中拥有控件时,你不能这样做。控件的唯一客户端ID不会是#propertyimage。它不可能是因为你可以有多个具有相同按钮名称的用户控件。 ASP.Net将生成与控制树相关的唯一ID。在这种情况下,获取clientid不会起作用,因为您处于转发器控件中,并且您不能使用相同的客户端ID进行多个控件。
你可以用课程做到这一点。这是一个example I put together on jsFiddle。它使用一个类来识别转发器,然后使用jquery next()方法选择下一个锚元素并显示/隐藏它。尝试改变你的代码:
<script src="Js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".propertyImage").mouseover(function () {
$(this).next("a").hide();
});
$(".propertyImage").mouseout(function () {
$(this).next("a").show();
});
});
</script>
<div class="ddldemo">
<asp:Repeater ID="rptproperty" runat="server">
<ItemTemplate>
<div style="width: 165px;">
<asp:Image ID="propertyimage" class="propertyImage" runat="server" ImageUrl='<%#Eval("image1") %>'" />
<asp:LinkButton runat="server" ID="lnkedit" Text="Edit"></asp:LinkButton>
</div>
</ItemTemplate>
</asp:Repeater>
</div>