Adding background image to button

问题

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>

回答1:

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/

回答2:

The following line in your code :

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

will try to add an url as string in your buttons inner html.

Use the following:

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

This will change the background image url of your buttons css styles.

回答3:

Add $(this).html("<img src='http://i.imgur.com/Q2sj6XQ.png'/>") as if you need as a html element or use $(this).css("background","url(http://i.imgur.com/Q2sj6XQ.png)") if need image in background.

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

To set background is like $(this).css('background','url("http://i.imgur.com/GKVoeGr.png") no-repeat 3px 5px');

回答5:

Your code is setting the html of the button to be the string of the image url, effectively setting the text on the button. The reason this works for unicode icons and not for images is that a unicode icon is added in the text inside the element, whereas a background image is part of the element.

To get the result you want with images, I'd suggest changing to use an additional class to apply the alternate background image:

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

And then changing the javascript to be:

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

This adds/removes the 'toggled' class and achieves the same result you were expecting using html

You could also simplify the code and use the toggleClass function of jquery:

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

This removes the need for the 'toggled' variable.

来源：https://stackoverflow.com/questions/36351283/adding-background-image-to-button

标签

jquery

html

button

imagebutton