Question

我有一个小的jQuery函数，我可以将背景图像更改为div。

HTML + jQuery

<div id="mydiv"></div>

<a onclick="chooseBackground('foo.jpg')">Foo!</a>

<script>    
function chooseBackground(file) {
       var file = '/path/to/'+file;
       $('#mydiv').css('background-image','url('+file+')');
    }
</script>

Chrome检查器中的结果是：

<div id="mydiv" style="background-image: url("/path/to/foo.jpg");"></div>

我也试过了：

$("#mydiv").css("background-image","url('"+file+"')");

引号是指而不是撇号标记应该包裹网址的内容。

在booth脚本上的结果是相同的。这里有什么想法？我错过了一些明显的东西吗？

[编辑]为什么这是一个问题

我有另一个预览整个div的脚本。该脚本复制div中的所有内容（包括背景图像）并以全屏显示。像这样：

<script>
function preview() {
    var background = $('#mydiv').css('background-image');
    var content = 'foo bar abc 123';
    $('#previewdiv').html('<div style="background-image:'+background+';">'+content+'</div>';
}
<script>

HTML中的结果是：

  <div style="background-image: url(" http:="" mydomain.com="" path="" to="" foo.jpg");">

Answer 1

您可以像下面这样做。希望这会对你有所帮助。

function chooseBackground(file) {
    var file = 'http://icons.iconseeker.com/png/128/soccer-teams/' + file;
    $('#mydiv').css('background-image', 'url(' + file + ')');
}
    
function preview() {
    var background = $('#mydiv').css('background-image');
    var content = $('#mydiv').html();
    $('#previewdiv').html(content).css('background-image', background);
}

#mydiv {
        height: 50px;
        width: 50px;
        background-size: cover;
        border: 1px solid #000;
    }

    #previewdiv {
        height: 150px;
        width: 150px;
        background-size: cover;
        border: 1px solid #000;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">Foo! Div</div><br/>
<div id="previewdiv">Previw div</div>

<a onclick="chooseBackground('barcelona-fc-logo.png')">Foo!</a>
|
<a onclick="preview()">Preview</a>

jQuery更改背景图像 - 引号

1 个答案: