Question

我有一些jquery代码，当点击显示另一个按钮时更改我的按钮; （它们是背景按钮图像）

但我不能让它显示背景图像。我可以改变它的颜色，但不知道如何添加bg图像。

更改某人解释我需要更改代码的位置

$('.chartme-btn-main').click(function(){
    if($(this).attr('att') == 0){
          $(this).css('background', '');
        $(this).attr('att',1);
    } else {
          $(this).css('background', 'yellow');
        $(this).attr('att',0);
    }
  });

任何帮助都会很棒!!!!

Answer 1

试试这个：

$('.chartme-btn-main').click(function() {
    $(this)
        .css('background', $(this).data('att') == 0 
            ? 'none' 
            : 'yellow url(yourimagepath)')
        .data('att', $(this).data('att') == 0 
            ? 1 
            : 0);
});

Answer 2

http://jsfiddle.net/wvLYd

var imgUrl = "http://silverspaceship.com/static/shot_1.png";
$(this).css('background', 'url('+imgUrl+')');

<强>更新

http://jsfiddle.net/wvLYd/2/

更好的解决方案：“不要等待加载新图像的请求”@Paul O'Brien

Answer 3

我会创建精灵图片，只需更改background-position，
这种方法的好处是没有等待加载新图像的请求

<强> LIVE DEMO

CSS：

.chartme-btn-main{
  background:url('images/buttonSprite.jpg');
}

.chartme-btn-main.active{
  background-position: 0px -210px;
}

jQuery的：

$('.chartme-btn-main').click(function(){
    $(this).toggleClass('active');
});

Answer 4

试试这个：

var imgUrl = "http://silverspaceship.com/static/shot_1.png";
$(this).css('background', 'url(' + imgUrl + ')');

Jquery按钮背景更改

4 个答案: