Question

我希望在使用jquery点击后将图像添加到按钮。我无法添加图像。

这是jquery代码

$('#b2').click(function(){
alert("b2 am called"); 
$(this).addClass("bg1");
});

这是css

.bg1 
{
background-image: url(info.jpg);   
background-repeat: no-repeat; 
border: none;    
}

input#b2
{
position:absolute;
left:370px;
top:130px;
width:90px; /*same as the height*/
height:90px;
}

这是Html代码

<div id="level_1"class="Level1"> 
<input type="button"  id="b2" value="" name="b2" >
</div>

以下是：JS Fiddle

Answer 1

这似乎在经过一些修改后按预期工作：

http://jsfiddle.net/dtq38yvz/7/

<div id="level_1" class="Level1"> 
    <input type="button" id="b2" value="" name="b2">
</div>

$('#b2').click(function(){
    $(this).addClass("bg1");
});

#b2
{
    position:absolute;
    left:370px;
    top:130px;
    width:90px; /*same as the height*/
    height:90px;
    background-color:#fff;
}

.bg1
{
    background:url('http://i.ytimg.com/vi/UFS6Ky7OnAw/mqdefault.jpg') no-repeat center center;
}

Answer 2

我认为您可能在工作示例中缺少jQuery库。我让它在这里工作：JSFIDDLE使用

$('#b2').click(function(){
    alert("b2 am called"); 
    $(this).addClass("bg1");
});

和

input.bg1
{
    background:url('http://i.ytimg.com/vi/UFS6Ky7OnAw/mqdefault.jpg');
}

完整的解决方案：

<style>
   input#b2
{
position:absolute;
left:370px;
top:130px;
width:90px; /*same as the height*/
height:90px;
background:#fff;
}

input.bg1
{
    background:url('http://i.ytimg.com/vi/UFS6Ky7OnAw/mqdefault.jpg') !important;
} 
</style>

<div id="level_1"class="Level1"> 
    <input type="button"  id="b2" value="" name="b2" />
</div>

<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
    var $  = jQuery
    $('#b2').click(function(){
        alert("b2 am called"); 
        $(this).addClass("bg1");
    });
</script>

将背景图像添加到jquery中的按钮

2 个答案: