鼠标悬停在图像上时按钮隐藏

Question

我有以下代码：

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

所有代码都在内容占位符中 当我将鼠标移到图像按钮上时不会隐藏/显示。

我该如何解决这个问题？

Answer 1

问题是您的元素没有 ID。您代码中的 ID 属性是服务器端 ASP.NET ID，它不是 HTML ID 属性。对于客户端 ID，请使用 ClientID:

<asp:Image ID="propertyimage" ClientID="propertyimage" runat="server" ImageUrl='<%#Eval("image1") %>'" />

与您的 LinkBut​​ton 相同：

<asp:LinkButton runat="server" ID="lnkedit" ClientID="lnkedit" Text="Edit"></asp:LinkButton>

当调试这样的代码时，记得在浏览器中查看源代码，以查看浏览器正在接收的实际 HTML。

如果您有多个，那么固定 ID 将不起作用，但它必须是唯一的。在这种情况下，您将需要使用其他东西，例如类，但您还需要添加逻辑以获取相对于图像的按钮。

Answer 2

当您在 ItemTemplate 中有控件时，您不能这样做。控件的唯一客户端 ID 不会是#propertyimage。不可能，因为您可以拥有多个具有相同按钮名称的用户控件。 ASP.Net 将生成与控制树相关的唯一 id。在这种情况下，获取客户端 ID 将不起作用，因为您处于中继器控件中，并且您不能拥有具有相同客户端 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>

Answer 3

小心，我对 ASP 了解不多，但我看到“模板”和“中继器”？因此，您似乎很有可能创建多个具有相同 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>