How do I include the css style background-image:url('') in a jquery string. This string breaks at the url('
var img=field.img;
$(".wrapper").append("<div class='slide bgimage' style='background-image: url('img/" + img + ".jpg');'></div>");
Add a comment
|
3 Answers
The string breaks because the opening single quotation mark after [style=] ends at [url(]. Since the string already contains both single quotation marks aswell as double quotation marks, you have to escape the 3rd.
Change
You should change the code from
$(".wrapper").append("<div class='slide bgimage' style='background-image: url('img/" + img + ".jpg');'></div>");
to
$(".wrapper").append("<div class='slide bgimage' style='background-image: url(\"img/" + img + ".jpg\");'></div>");
Example
var field = {
img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/140626_Tierser_Alpl_Rossz%C3%A4hne.jpg/245px-140626_Tierser_Alpl_Rossz%C3%A4hne"
}
var img=field.img;
$(".wrapper").append("<div class='slide bgimage' style='background-image: url(\"" + img + ".jpg\");'></div>");.slide {display:inline-block;width:400px;height:400px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper"></div>
Comments
You can utilize jQuery(html, attributes). Note, quotes are not necessary for URL within css url() function.
$(function() {
var field = {
img: "http://placehold.it/100x100"
}
var img = field.img;
var div = $("<div></div>", {
"class": "slide bgimage",
"style": "background-image: url(" + img + ")"
});
$(".wrapper").append(div);
});.wrapper,
.wrapper div {
width: 100px;
height: 100px;
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="wrapper"></div>
9 Comments
adeneo
+1, this is the way to go imo, but remember that
class is a reserved keyword, and should always be quoted.
guest271314
@adeneo "but remember that
class is a reserved keyword, and should always be quoted." Previously had the same consideration, though was corrected. Will try to locate the exchangeguest271314
@adeneo stackoverflow.com/a/36638058 , stackoverflow.com/q/4348478. Updated post to include quotes anyway.
adeneo
I'll strongly disagree with Mathias Bynens on that one. The specs clearly states that "An Identifier is an IdentifierName that is not a ReservedWord" and it goes on to list
class as one of the reserved words that an Identifier name can not be. Sure, it works in all modern browsers, but so do a lot of other things one should generally avoid doing.adeneo
He also goes on to argue on his blog that identifiers and identifier names aren't neccessarely the same thing, and that all though reserved words can't be used in variables, they are fine as object keys (identifier names). I'm not sure if his right or not, but it sounds very strange to me, and I think he's reading that wrong, an identifier is a ES "token", wether it's a variable or property name, and both have an identifier name that can not be a reserved keyword, or at least, so I think?
|
Its not a good practice to insert/append a div element like that you might consider changing into this format
var img=field.img;
var imgUrl='img/' + img +'.jpg';
var divElement=jQuery("<div>");
divElement.addClass('slide');
divElement.addClass('bgimage');
divElement.css('background-image',imgUrl);
$(".wrapper").append(divElement);
Hope it helps
