將背景圖像添加到jquery中的按鈕

我想添加圖像到按鈕，一旦點擊使用jquery.I無法添加圖像。將背景圖像添加到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

來源

2014-12-04 Kavita g

嘗試使用'！important'在'.bg1'類 – 2014-12-04 11:31:40

適用於[Fiddle]（http://jsfiddle.net/chipChocolate/0wmao9ny/）。你看到'alert（）'嗎？如果沒有，你不包括jQuery庫的鏈接。 – 2014-12-04 11:34:24

我可以看到警報 – 2014-12-04 11:37:02

我想你可能爲m在你的工作示例中發佈jQuery庫。我得到了它在這裏工作：使用

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

和

JSFIDDLE

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>

來源

2014-12-04 11:50:01 babusi

其中Jquey圖書館？ – 2014-12-04 11:52:29

嘗試在你的javascript之前添加'' – babusi 2014-12-04 11:54:32

我添加了上面的庫，但仍然無法正常工作 – 2014-12-04 11:58:30

這似乎有些修改後的打算工作：

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; 
}

來源

2014-12-04 12:06:39

將背景圖像添加到jquery中的按鈕

回答

相關問題