Question

我尝试使用jQuery更改 ImageButton 的图像src，然后无法更改背景。

我试过下面的脚本或那个：

$(document).ready(function () 
 {
    $('#<%=imageButtonId.ClientID%>').click(function () 
    {

            $('#<%=imageButtonId.ClientID%>').attr("src", "mobile/images/writelogbook_icon.png");

     });
});

我也尝试过object.css（“backgroundImage”，“path”）; 但是，这也失败了。请建议我。我正在使用jquery 1.4.4分钟

修改来自html的相关代码：

<input type="image" name="imageButtonId" id="imageButtonId" src="Images/admin.png" />



   $('#imageButtonId).click(function () {
$(this).attr('background-image', 'Images/customer.png');        });

谢谢，

Naresh Goradara

Answer 1

很难从你的问题中说出来。一些事情要尝试：

在生成的页面上查看您的HTML源代码。什么是<%=imageButtonId.ClientID%>呈现为？
提醒$('#<%=imageButtonId.ClientID%>').length。你得到了什么？
就个人而言，我不会有第二个$('#<%=imageButtonId.ClientID%>')。请改用$(this)。

您可以尝试发布一些呈现的页面（即带有imageButtonId的HTML和呈现的JavaScript。这将有助于我们确定错误。

Answer 2

什么html类型是＃imageButtonId.ClientID？ src与图像一起使用，而不是按钮（以防万一你用按钮尝试这个）。如果是按钮，则必须使用css（'background-image'，path）。注意背景图像 - NOT camelCase。

如果仍然无效，请在某些开发工具中查看对象的CSS，例如firebug，safari / chrome的开发人员工具等。属性是否更改，只是没有显示图像，或者没有设置任何内容。

如前所述，你想使用$（this）.css（'background-image'，path）;

祝你好运！

编辑：刚注意到你的html添加 - 为什么不做：

$('#imageButtonID').click(function() {
   $(this).css('background-image', 'path/to/image');
});

除非你需要type = image的图像映射类型功能，否则我建议使用样式按钮。你只需要用css设置样式（内联样式='background-image：path / to / image.png'或样式表。喜欢：

<input name='imageButtonID' id='imageButtonID' style='background-image:path/to/image.png'>

然后

$('#imageButtonID').click(function() {
   $(this).css('background-image', 'path/to/newimage.png');
});

Answer 3

你应该试试这个：

<asp:ImageButton ID="imageButtonId" runat="server" src="Images/admin.png"> 
</asp:ImageButton>
<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=imageButtonId.ClientID%>').click(function (e) {

            $('#<%=imageButtonId.ClientID%>').attr("src", "Images/customer.png");
            e.preventDefault();
        });
    });
</script>

这在我的测试项目中运行良好。只需记住e.preventDefault，并在click-function中传入e。这会导致图像按钮不回发到服务器，从而刷新页面。

如果页面刷新，图像按钮将再次显示其原始图像。

Answer 4

您正在使用相对路径。图像的路径是否正确？尝试使用绝对路径。

使用jquery 1.4.4更改imagebutton的图像src

4 个答案: