Question

如何更改图像按钮客户端的图像，onclick。

我试过这个：

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

Answer 1

//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');
});

请注意.on()是jQuery 1.7的新版本，在这种情况下与.bind()相同。

我不确定ASP.net如何呈现您的按钮，但您可以使用元素的ID来定位它：

$('#MainContent_ImageButton1').on('click', function () {

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

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

以下是演示：http://jsfiddle.net/jasper/PQ4fp/

Answer 2

在JavaScript中很容易

HTML代码

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

JavaScript代码

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

</script>

Answer 3

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

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

3 个答案: