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

回答

相关问题