用于图像的交换按钮(Jquery)

Question

我有一个按钮,当它被点击时,我想用图像替换按钮.我怎么能在JQuery中做到这一点？是否有可能替换图像的背景？按钮本身在一个大的div内,我不想在按钮周围添加另一个div,因为它弄乱了以前的布局.

Answer 1

如果要替换按钮元素:

$('the-button').bind('click', function () {
    $(this).replaceWith('<img src="/wherever.jpg"/>');
});

如果要更改按钮的背景图像:

$('the-button').bind('click', function () {
    $(this).css('backgroundImage', 'url(\'/wherever.jpg\')');
});

如果要更改图像的背景图像(:S):

$('the-button').bind('click', function () {
    $(this).replaceWith('<img src="/wherever.jpg" style="background-image:url(\'/somewhere-else.jpg\');"/>');
});