按钮隐藏图像

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

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

问题是您的元素没有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 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>