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

を役に立てば幸いあなたはこの形式に変更することを検討するかもしれない ようなdiv要素を追加します

[スタイル=]の後に開いている一重引用符が[url（]。）で終了するため、文字列が折り返されます。 文字列には二重引用符と二重引用符の両方が含まれているため、3rdをエスケープする必要があります。

あなたは

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

012例のコードを変更する必要があり

変更

Answer 2

そのない挿入することをお勧めで、この文字列の区切りは/

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)を利用できます。 URLがcssurl()以内であれば、引用符は必要ありません。

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