jQuery更改背景圖像 - 引號

我有一個小的jQuery功能，我可以將背景圖像更改爲div。jQuery更改背景圖像 - 引號

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中的所有內容（包括背景圖像）並全屏顯示。就像這樣：

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

來源

2015-12-11 Stichy

嗨！抱歉。編輯了這個問題。我在這裏寫錯了Stackoverflow – Stichy

您提供的代碼按預期工作：http://jsfiddle.net/mx3tv69m/。在HTML中使用引號有什麼問題？ –

@RoryMcCrossan：檢查員的結果是一樣的：

。 Chrome瀏覽器是否很奇怪？ – Stichy

你可以做到這一點像以下。希望這會幫助你。

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>

來源

2015-12-11 10:07:31 Azim

jQuery更改背景圖像 - 引號

回答

相關問題