jQuery change background image - Котировочные знаки

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

Знаки кавычек там вместо апострофных знаков, которые должны обернуть URL.

Результат такой же на сценариях стендов. Есть идеи? Мне что-то не хватает?

[Редактировать] Почему это проблема

У меня есть еще один сценарий, который просматривает весь 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>