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，您必须定位正确的属性。即按钮的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();
})

查看小提琴，例如：https://jsfiddle.net/krvct8Lg/

编辑：我为您添加了一些进一步的读物：http://api.jquery.com/html/和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样式的背景图片网址。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 5

您的代码将按钮的html设置为图片网址的字符串，有效地设置按钮上的文字。这适用于unicode图标而不适用于图像的原因是在文本里面元素中添加了unicode图标，而背景图像是元素的一部分。< / p>

要获得图片所需的结果，我建议您更改为使用其他课程来应用替代背景图片：

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

这会添加/删除＆＃39;切换＆＃39;使用html

获得与预期相同的结果

您还可以简化代码并使用jquery的toggleClass函数：

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

这消除了对切换＆＃39;的需求。变量

将背景图像添加到按钮

5 个答案: