按鈕隱藏圖像

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>