将背景图像添加到按钮答案

【问题标题】：Adding background image to button将背景图像添加到按钮
【发布时间】：2016-04-01 08:12:57
【问题描述】：

我想要一个箭头指向我的按钮，自动缩放并使用我在 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>

【问题讨论】：

标签： jquery html button imagebutton

【解决方案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/ 和 http://api.jquery.com/css/

【讨论】：

【解决方案2】：

代码中的以下行：

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

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

使用以下内容：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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');

【讨论】：

【解决方案5】：

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

要获得您想要的图像结果，我建议更改为使用附加类来应用备用背景图像：

.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();
})

这将添加/删除“toggled”类并达到您使用html所期望的相同结果

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

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

这消除了对“切换”变量的需要。

【讨论】：