asp:imagebutton，从javascript/jquery更改图像

如何更改图像按钮客户端的图像，单击

我试过这个：

function changetoDownload(theId) {
   $(theId.id).delay(2000)
   .queue(function (next) { $(theId).attr("ImageURL", "Images/Apps/free.png"); next(); });
}

<asp:ImageButton ID="ImageButton1" OnClick="Button7_Click" OnClientClick="changetoDownload(this.id);" ImageUrl="Images/download.gif" runat="server" />

功能更改为下载（theId）{
$（theId.id）.延迟（2000）
.queue（函数（next）{$（theId）.attr（“ImageURL”，“Images/Apps/free.png”）；next（）；}）；
}

JQuery在客户端运行。javascript无法工作的原因是“asp”标记呈现在服务器端，一旦显示在客户端，标记将更改为HTML。您引用的是HTML中不存在的ImageURL属性，它将是“src”属性。您可以通过部署代码，然后在浏览器中使用“查看源代码”来检查这一点

//target all `<input type="image" />` elements and bind a `click` event handler to them
$('input[type="image"]').on('click', function () {

    //change the `src` of this element
    $(this).attr('src', 'Images/Apps/free.png');
});

您可以在浏览器中检查文档的源，以查看该源是否是ASP按钮的实际呈现ID

下面是一个演示：

这在JavaScript中非常简单

HTML代码

<asp:ImageButton ID="img" runat="server"  OnClientClick="return abc(this);" />

<script language="javascript" type="text/javascript">
function abc(ImageID) {
    var img = document.getElementById(ImageID.id);
    img.src = "Jellyfish.jpg";
    return false;
}

</script>

---

JavaScript代码

<asp:ImageButton ID="img" runat="server"  OnClientClick="return abc(this);" />

<script language="javascript" type="text/javascript">
function abc(ImageID) {
    var img = document.getElementById(ImageID.id);
    img.src = "Jellyfish.jpg";
    return false;
}

</script>

函数abc（图像ID）{
var img=document.getElementById（ImageID.id）；
img.src=“jellyphish.jpg”；
返回false；
}

View source显示其呈现为：从那里可以看到图像链接呈现为“src”。上面的Jasper有正确的解决方案，从你的帖子中你可以看到ID是MainContent\u ImageButton1，所以在上面的代码示例中用它代替ImageButton1。我勾选了它，因为它是真实的，包含有用的相关信息，但遗憾的是，这对我来说是不够的。我可以看到src属性和innerHTML字段在浏览器调试器中已正确更新，但旧图像仍会继续显示！：（OP正在使用母版页，正如他在评论中所说的。所以我认为，在你的情况下ID是不可追踪的。$（'MainContent_ImageButton1'）。在（'click'，function（）{//更改此元素$（this.attr（'src'，'Images/Apps/free.png'）；）上；OP发布了元素的HTML源代码，它是一个ID为

MainContent\u ImageButton1

的

input

标记。因此我上面的任何一个选择器都应该可以工作（除非框架可以更改ID，我不确定）。当使用MainContent_ImageButton1作为ID时，我在评论中发布的上述内容是有效的。但我可以使用多个按钮来实现吗？而不必为每个ImageButton创建函数？@ClemenGronver在这种情况下，您应该向元素添加一个类以将它们组合在一起，这样您就可以像这样选择它们：

$（'.my custom class'）。on（'click'，function（）{…}）；

，或者您可以使用我的答案

$（'input[type=“image”]）

中的第一个选择器，它选择所有

元素（如您的按钮）。您也可以同时选择多个元素，用逗号分隔选择器：

$（“#主要内容"图像按钮1、#主要内容"图像按钮2、#主要内容"图像按钮3”）…

既然使用的是jQuery，那么您最好利用easy binding系统，而不是使用内联JS，因为您可能需要更新许多代码，而不是执行所有事件处理的单个代码。我可以将此函数保存在JavaScript文件中，并且可以重复使用。仅供参考，请检查标记和标题。我有类似于上述的代码，但尽管我可以看到它确实在调试器中更改了src，但旧图像仍会继续显示。似乎还需要一些其他内容：(