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