在jQuery字符串中包含background-image url css

Question

如何在jQuery字符串中包含css样式background-image：url（''）。在URL（”

var img=field.img; 
$(".wrapper").append("<div class='slide bgimage' style='background-image: url('img/" + img + ".jpg');'></div>"); 

Answer 1

由于[style =]后面的单引号开头在[url（]。 ]处结束，因此字符串已经包含单引号和双引号，因此您必须转义第三个。

变化

你应该将代码从

$(".wrapper").append("<div class='slide bgimage' style='background-image: url('img/" + img + ".jpg');'></div>"); 

改变

$(".wrapper").append("<div class='slide bgimage' style='background-image: url(\"img/" + img + ".jpg\");'></div>"); 

例

var field = { 
 
\t 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>

Answer 2

它不是一个很好的做法，插入该字符串休息/追加像 div元素，你可能会考虑更改成这种格式

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

希望它可以帮助

Answer 3

您可以利用jQuery(html, attributes)。请注意，对于cssurl()函数中的URL，引号不是必需的。

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