使用jQuery/ASP.NET更新圖像（runat服務器）源使用jQuery/ASP.NET

我試圖更新圖像的源代碼。問題在於img正在運行服務器端，因爲它的初始源是在加載時設置的。使用jQuery/ASP.NET更新圖像（runat服務器）源使用jQuery/ASP.NET

這裏是ASPX/HTML：

<h2><asp:Label ID="lblTitle" runat="server" /></h2> 
<img id="largeImg" runat="server" width="320" alt="Large Image" /> 
<p class="thumbs"> 
<a id="imgBACK" runat="server" title="Back"><img id="imgBACK_Thumb" runat="server" /></a> 
<a id="imgFRONT" runat="server" title="Front"><img id="imgFRONT_Thumb" runat="server" /></a> 
<a id="imgINSIDELEFT" runat="server" title="Inside Left"><img id="imgINSIDELEFT_Thumb" runat="server" /></a> 
<a id="imgINSIDERIGHT" runat="server" title="Inside Right"><img id="imgINSIDERIGHT_Thumb" runat="server" /></a> 
</p>

正在使用的樣品jQuery代碼可以發現here或以下：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Image Replacement</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
     $("h2").append('<em></em>') 
    $(".thumbs a").click(function(){ 

     var largePath = $(this).attr("href"); 
     var largeAlt = $(this).attr("title"); 

     $("#largeImg").attr({ src: largePath, alt: largeAlt }); 

     $("h2 em").html(" (" + largeAlt + ")"); return false; 
    }); 
}); 
</script> 
<style type="text/css"> 
body { 
    margin: 20px auto; 
    padding: 0; 
    width: 580px; 
    font: 75%/120% Arial, Helvetica, sans-serif; 
} 
h2 { 
    font: bold 190%/100% Arial, Helvetica, sans-serif; 
    margin: 0 0 .2em; 
} 
h2 em { 
    font: normal 80%/100% Arial, Helvetica, sans-serif; 
    color: #999999; 
} 
#largeImg { 
    border: solid 1px #ccc; 
    width: 550px; 
    height: 400px; 
    padding: 5px; 
} 
.thumbs img { 
    border: solid 1px #ccc; 
    width: 100px; 
    height: 100px; 
    padding: 4px; 
} 
.thumbs img:hover { 
    border-color: #FF9900; 
} 
</style> 
</head> 
<body> 
<h2>Illustrations</h2> 
<p><img id="largeImg" src="images/img1-lg.jpg" alt="Large image" /></p> 
<p class="thumbs"> 
    <a href="images/img2-lg.jpg" title="Image 2"><img src="images/img2-thumb.jpg" /></a> 
    <a href="images/img3-lg.jpg" title="Image 3"><img src="images/img3-thumb.jpg" /></a> 
    <a href="images/img4-lg.jpg" title="Image 4"><img src="images/img4-thumb.jpg" /></a> 
    <a href="images/img5-lg.jpg" title="Image 5"><img src="images/img5-thumb.jpg" /></a> 
    <a href="images/img6-lg.jpg" title="Image 6"><img src="images/img6-thumb.jpg" /></a> 
</p> 
</body> 
</html>

目前，所有的圖像源是完美的在負載（小並通過代碼隱藏加載大圖片）。但是，單擊縮略圖不會更改大圖像，因爲它正在運行服務器端。

有關如何解決此問題的任何想法？

非常感謝您提前！在將我的頭撞在牆上太久後，我終於扔了毛巾（至少幾個小時）。

謝謝！

- 亞當

來源

2009-12-09 Adam

這應該工作，除了兩點：

圖像的src可以在客戶端進行更改，但不希望看到的是在之後的服務器端回發。圖像不會發布，只有輸入字段。
你的img是runat="server" - 這意味着它的id在頁面上的變化（除非它在根級別上，例如，沒有母版頁，面板，中繼器等）。您需要使用
```
$('#<%=largeImg.ClientID%>') 
```
這是相當醜陋，或只需添加一個類和使用，在您的選擇：
```
<img id="largeImg" runat="server" width="320" alt="Large Image" 
    CssClass="LargeImage" /> 

$(".LargeImage").attr({ src: largePath, alt: largeAlt }); 
```

來源

2009-12-09 07:34:27 Kobi

你只是做我的夜晚！無法告訴你我有多感謝你！ – Adam 2009-12-09 07:38:47

沒問題。歡迎來到StackOverflow，這就是我們所做的:) – Kobi 2009-12-09 07:39:28

使用jQuery/ASP.NET更新圖像（runat服務器）源使用jQuery/ASP.NET

回答

相關問題