使用 jQuery/ASP.NET 更新图像（运行服务器）Src

发布于 2024-08-14 05:40:10 字数 3100 浏览 6 评论 0原文

我正在尝试使用 jQuery 更新图像的源。问题是 img 正在服务器端运行，因为它的初始源是在加载时设置的。

下面是 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 代码可以在此处< /a> 或以下：

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

目前，所有图像源在加载时都是完美的（小图像和大图像是通过代码隐藏加载的）。但是，单击缩略图不会更改大图像，因为它在服务器端运行。

关于如何解决这个问题有什么想法吗？

预先非常感谢您！在我把头撞在墙上太多个小时之后，我终于认输了（至少几个小时）。

谢谢！

-亚当

原文

I'm trying to update the source of an image using jQuery. The problem is that the img is running server side as its initial source is being set on load.

Here is the 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>

The sample jQuery code being used can be found here or below:

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

Currently, all image sources are perfect at load (the small and large images are being loaded via the codebehind). However, clicking on the thumbnails does not change the large image because it's running server side.

Any ideas on how to fix this?

Thank you very much in advance! After banging my head against the wall for far too many hours, I'm finally throwing in the towel (for at least a few hours).

Thanks!

-Adam

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瀞厅☆埖开 2024-08-21 05:40:10

除了两点之外，这应该可行：

图像的 src 可以在客户端更改，但不要指望在回发后在服务器端看到它。不发布图像，仅发布输入字段。
您的 img 是 runat="server" - 这意味着它的 id 在页面上发生变化（除非它位于根级别，例如，没有母版页、面板、中继器等）。您需要使用
```
$('#<%=largeImg.ClientID%>')
```
这非常难看，或者简单地添加一个类并在选择器中使用它：
```
$(".LargeImage").attr({ src:largePath, alt:largeAlt });
```

This should work, besides two points:

The src of the image can be changed at client side, but don't expect to see that on the server side after a postback. Images aren't posted, only input fields.
Your img is runat="server" - this means its id changes on the page (unless it's on the root level, eg, no master page, panels, repeaters, etc). You need to use
```
$('#<%=largeImg.ClientID%>')
```
Which is quite ugly, or simply add a class and use that in your selector:
```
<img id="largeImg" runat="server" width="320" alt="Large Image"
     CssClass="LargeImage" />

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