使用jquery更改ImageUrl

Question

我在asp.net中有以下超链接：

<asp:HyperLink ID="a" runat="server" ImageUrl="1.png" NavigateUrl="https://google.com/"></asp:HyperLink>

我想通过jquery将ImageUrl更改为2.png。我正在尝试这个，但它不起作用：

$("#a").attr("ImageUrl", "2.png");

Answer 1

imageurl在呈现客户端时不存在。它应该将你的asp控件转换成这样的东西。

<a href="/myurl.aspx"><img src="/my/image.jpg" /></a>

你应该使用像

这样的东西

$("#<%=a.ClientID%>").find("img").attr("src", "2.png");

我没有对此进行测试，但它应该让你走上正确的道路。

Answer 2

这里有几件事......

我发现如果包含runat属性，则无法以这种方式选择元素。你需要像这样引用这个对象......

var hyperLink = document.getElementById("<%= a.ClientID %>");

那会给你正确的对象。现在，asp：HyperLink保存为附加图像的锚点。因此，您可以像这样引用和更改源。

$(hyperLink).find("img").attr('src', '2.png');

Answer 3

您需要查看由.NET呈现的标记而不是服务器端代码。

因此，通过查看标记，您将看到：

<asp:HyperLink ID="a" runat="server" ImageUrl="1.png" NavigateUrl="https://google.com/"></asp:HyperLink>

渲染（至少在.net 4.0中）：

<a id="a" href="https://google.com/">
    <img alt="" src="1.png">
</a>

在我的小测试项目中，标记ID与webforms id匹配，但情况并非总是如此。

因此，要使用jquery更改图像，您只需说：

$('img', $('#<%= a.ClientID %>')).attr('src', '2.png');

这将在标签内找到ID为a的图像标签，并更改其src属性。

建议 - 使用比'a'更好的ID名称。你的标记需要很容易辨认。此外，在处理webforms时（如上所述），请始终使用＆lt;％= tagid.ClientID％＆gt;在jquery。