Question

我有一个带背景图片的按钮。

HTML

<input name="" type="button" value=" " style="background:url(http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png)
 no-repeat center; width:13px; height:11px; border:none;">

js Fiddle link

我想添加的是当我点击按钮时，背景图像应该改变并成为另一个图像（暗图像）。以下是该图像的link应该替换的内容。然后再次点击暗图像返回浅色图像。

我想知道他可能吗？我不知道该怎么做。如果这样做可以做得很好。

Answer 1

$('input:button').on('click',function(){
 $(this).css('background-image','url(http://img4.imageshack.us/img4/1815/iconanalyticsaccessacce.png)');
})

演示--> http://jsfiddle.net/eCkGQ/5/

更新：

切换图片

的CSS：

.light{
  background:url('http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png') no-repeat center;
}

.dark{
  background:url('http://img4.imageshack.us/img4/1815/iconanalyticsaccessacce.png') no-repeat center;
}

HTML：

<input class='light' name="" type="button" value=" " style="width:13px; height:11px; border:none;">

JS：

$('input:button').on('click', function () {
    $(this).toggleClass('dark light');
});

演示--> http://jsfiddle.net/eCkGQ/14/

Answer 2

请在http://jsfiddle.net/eCkGQ/8/

结帐演示

<div style="Width:36px;">    
    <input name="" type="button" value=" " style="background:url(http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png) no-repeat center; width:13px; height:11px; border:none;" id='img'/>
</div>

$('#img').click(function(){
$(this).css('background','url(http://img4.imageshack.us/img4/1815/iconanalyticsaccessacce.png)')
});

Answer 3

试试这个（ OP在上面的评论中提到了同样的内容）

<强> HTML

<input name="" type="button" value=" " class="first" style="width:13px; height:11px; border:none;">

<强> CSS

.first{
     background:url(http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png) no-repeat center;         
}

.second{
     background:url(http://img4.imageshack.us/img4/1815/iconanalyticsaccessacce.png) no-repeat center;
}

<强>的jQuery

 $('input:button').on('click',function(){
    $(this).toggleClass("first second");
 });

<强> Working Fiddle

Answer 4

此代码在不使用新类的情况下工作，它基本上在两个给定图像之间切换：http://jsfiddle.net/zPeD3/

HTML

<div style="Width:36px;">
    <input name="" type="button" value=" " style="background:url(http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png) no-repeat center; width:13px; height:11px; border:none;" />
</div>

使用Javascript：

$('input').click(function() {
    var imgs = ['http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png', 'http://img4.imageshack.us/img4/1815/iconanalyticsaccessacce.png'];
    var current = $(this).css('background-image');
    $(this).css('background-image', 'url(' + (current.contains(imgs[1]) ? imgs[0] : imgs[1]) + ')');
});

Answer 5

添加定义默认值的css类

.default{
background:url(http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png no-repeat center;
width:13px; 
height:11px; 
border:none;
}

.new{
background:url('http://img4.imageshack.us/img4/1815/iconanalyticsaccessacce.png') no-repeat center;
width:13px; 
height:11px; 
border:none;
}

JQuery：

$('input:button').on('click',function(){
 $(this).removeClass('default');
$(this).addClass('new');
})

单击按钮更改按钮背景图像

5 个答案: