Question

如何在jquery字符串中包含css样式background-image：url（＆＃39;＆＃39;）。此字符串在网址处中断（＆＃39;

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

Answer 1

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

更改

您应该从

更改代码

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

实施例

＆＃13;

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

＆＃13;

.slide {display:inline-block;width:400px;height:400px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper"></div>

＆＃13;

Answer 2

您可以使用jQuery(html, attributes)。请注意，css url()函数中的网址不需要引号。

＆＃13;

$(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);

});

＆＃13;

.wrapper,
.wrapper div {
  width: 100px;
  height: 100px;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="wrapper"></div>

＆＃13;

Answer 3

插入/追加这样的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);

希望有所帮助

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

3 个答案: