给按钮添加背景图片

Question

我想要一个向下指向我的按钮的箭头，自动缩放并使用我在 Imgur 上上传的链接，但它不起作用。我有一个 if else 语句，使用 unicode 图标它可以工作，但是当使用图像时它不起作用。我的代码有什么问题？

<!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>

Answer 1

您在 jquery $(this).html 中定位 html 您必须定位正确的属性。 IE。按钮的css：$(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();
})

查看 fiddle 例如：https://jsfiddle.net/krvct8Lg/

编辑：我为您添加了一些进一步的阅读材料：http://api.jquery.com/html/ and http://api.jquery.com/css/

Answer 2

代码中的以下行：

$(this).html("http://i.imgur.com/Q2sj6XQ.png");

将尝试在 html 内的按钮中添加一个 url 作为字符串。

使用以下内容：

$(this).css( "background-image", "url(http://i.imgur.com/Q2sj6XQ.png)" );

这将更改按钮 css 样式的背景图像 url。

Answer 3

添加 $(this).html("<img src='http://i.imgur.com/Q2sj6XQ.png'/>") 作为 html 元素，或者如果需要背景图像则使用 $(this).css("background","url(http://i.imgur.com/Q2sj6XQ.png)")。

Answer 4

var toggled = false;
$("button").click(function() {
  if (!toggled) {
    $(this).css('background', 'url("http://i.imgur.com/Q2sj6XQ.png") no-repeat 3px 5px');
    toggled = true;
  } else {
    $(this).css('background', 'url("http://i.imgur.com/GKVoeGr.png") no-repeat 3px 5px');
    toggled = false;
  }

  $("p").slideToggle();
})

.button {
  background: url("http://i.imgur.com/GKVoeGr.png") no-repeat 3px 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

设置背景就像$(this).css('background','url("http://i.imgur.com/GKVoeGr.png") no-repeat 3px 5px');

Answer 5

您的代码将按钮的 html 设置为图像的字符串 url，有效地设置了按钮上的文本。这适用于 unicode 图标而不适用于图像的原因是在元素内的文本中添加了 unicode 图标，而背景图像是 的一部分 元素.

为了获得您想要的图片效果，我建议更改为使用额外的 class 来应用备用背景图片：

.button {
  background: url("http://i.imgur.com/GKVoeGr.png") no-repeat 3px 5px;
}
.button.toggled {
  background-image: url("http://i.imgur.com/Q2sj6XQ.png");
}

然后将 javascript 更改为：

var toggled = false;
$("button").click(function() {
  if (!toggled) {
    $(this).addClass('toggled')
    toggled = true
  } else {
    $(this).removeClass('toggled')
    toggled = false
  }
  $("p").slideToggle();
})

此 adds/removes 'toggled' class 并使用 html

获得与您预期相同的结果

你也可以简化代码，使用jquery的toggleClass函数：

$("button").click(function() {
  $(this).toggleClass('toggled')
  $("p").slideToggle();
})

这消除了对 'toggled' 变量的需要。

给按钮添加背景图片

Adding background image to button

html

jquery

button

imagebutton