添加背景图片按钮 [英] Adding background image to button
问题描述
我想一个箭头指向了我的按钮，自动定并利用我在Imgur上载的链接，但它不工作。我有一个if else语句，使用UNI code图标，它的工作原理，但使用图像时，它不工作..有什么毛病我的code？
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js＆GT;＆下; /脚本＆GT;
＆LT;风格类型=文/ CSS＆GT;
.button {
背景：网址（http://i.imgur.com/GKVoeGr.png）不重复的3px为5px;
}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;按钮样式=宽度：250像素，高度：100像素;类=按钮＆GT;
＆LT; /按钮＆GT;
＆所述p为H.;
＆LT; I＆gt;内容模具weer TE geven是BIJ HET klikken范·德·杏花村＆LT; / I＆GT;
＆所述; / P＆GT;＆LT;脚本＆GT;
无功切换= FALSE;
$（按钮）。点击（函数（）{
如果（！切换）{
$（本）。html的（http://i.imgur.com/Q2sj6XQ.png）;
切换=真;
}其他{
$（本）。html的（http://i.imgur.com/GKVoeGr.png）;
切换= FALSE;
} $（P）的slideToggle（）;
}）
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
您在您的jQuery针对HTML $（本）。html的你必须定位正确属性。即按钮的CSS： $（本）的.css
VAR切换= FALSE;
$（按钮）。点击（函数（）{
如果（！切换）{
$（本）的CSS（背景，URL（http://i.imgur.com/Q2sj6XQ.png））;
切换=真;
}其他{
$（本）的CSS（背景，URL（http://i.imgur.com/GKVoeGr.png））;
切换= FALSE;
} $（P）的slideToggle（）;
}）
查看捣鼓例如： https://jsfiddle.net/krvct8Lg/
编辑：
我加了一些进一步的读数为您提供： http://api.jquery.com/html/ 和< A HREF =http://api.jquery.com/css/相对=nofollow> http://api.jquery.com/css/
I want an arrow pointing down on my button, autoscaled and using the links I have uploaded on Imgur but it's not working. I have an if else statement, with unicode icons it works but when using images it doesn't work.. What's wrong with my code?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
.button {
background: url("http://i.imgur.com/GKVoeGr.png") no-repeat 3px 5px;
}
</style>
</head>
<body>
<button style="width: 250px; height: 100px;" class="button">
</button>
<p>
<i>Content die weer te geven is bij het klikken van de knop.</i>
</p>
<script>
var toggled = false;
$("button").click(function() {
if (!toggled) {
$(this).html("http://i.imgur.com/Q2sj6XQ.png");
toggled = true;
} else {
$(this).html("http://i.imgur.com/GKVoeGr.png");
toggled = false;
}
$("p").slideToggle();
})
</script>
</body>
</html>
You are targeting the html in your jquery $(this).html you have to target the correct attribute. I.e. the css of the button: $(this).css
var toggled = false;
$("button").click(function() {
if (!toggled) {
$(this).css( "background", "url(http://i.imgur.com/Q2sj6XQ.png)" );
toggled = true;
} else {
$(this).css("background", "url(http://i.imgur.com/GKVoeGr.png)");
toggled = false;
}
$("p").slideToggle();
})
Check out fiddle for example: https://jsfiddle.net/krvct8Lg/
Edit: I added some further readings for you: http://api.jquery.com/html/ and http://api.jquery.com/css/
这篇关于添加背景图片按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
