更改div背景圖像爲具有jQuery的特定圖像

我幾乎不知道jQuery的。瞭解HTML，PHP和CSS我可以理解它並修改已經存在的腳本，但現在我碰到了一堵磚牆。更改div背景圖像爲具有jQuery的特定圖像

我正在嘗試創建圖像庫，您可以在其中單擊圖像並顯示全屏作爲背景。我遇到的問題是我不能改變背景。

我試過的是通過點擊「更換器」來更改「背景」的背景圖像。應該是新背景的圖像是我在功能中加入的DSC_2363。

編輯：您可以在http://lautamaki.net/omasivu2/

我的CSS看到正在進行的頁面是這樣的：

 .background{ 
     background-image: url(images/DSC_1418.JPG); 
     background-size: cover; 
     background-color: black; 
     width: 100%; height: 100%; 
     position: fixed; top: 0; left: 0; 
     }

的Jquery：

$('.changer').click(function(image){ 
     $('.background').css("background-image", "url(images/".image.".JPG)"); 
    });

最後HTML：

<div class="background"> 
</div> 
<div class="content"> 
    <img class="changer" src="images/DSC_2363.JPG" width="30" onClick="function(DSC_2363)"> 
</div>

我知道已經有這樣的問題，但沒有一個幫助我。希望有人得到我想要的，並可以幫助我，謝謝！

編輯：改變

$('.background').css("background-image", "url(images/".image.".JPG)");

到

$('.background').css("background-image", "url(images/"+image+".JPG)");

，但仍然沒有工作。

來源

2014-03-13 user3414353

檢查更新【答案】（http://stackoverflow.com /問題/ 22373410 /＃22373429） –

您需要使用+，而不是.在來連接字符串Javascript

$('.changer').click(function(image){ 
    $('.background').css("background-image", "url(images/" + image + ".JPG)"); 
});

來源

2014-03-13 08:52:33 Felix

在JavaScript中，我們使用+進行連結不.

$('.changer').click(function (image) { 
    $('.background').css("background-image", "url(images/" + image + ".JPG)"); 
    //             ^ ^
});

OP更新問題

後更新代碼

Ch安格你的HTML添加data-image = "DSC_2363"代替的onclick功能

<div class="content"> 
    <img class="changer" data-image = "DSC_2363" src="images/DSC_2363.JPG" width="30" > 
</div>

$('.changer').click(function() { 
    var image = $(this).data('image'); //get data-image attribute 
    $('.background').css("background-image", "url(images/" + image + ".JPG)"); 
});

來源

2014-03-13 08:52:34

試試這個：

$('.changer').on('click',function(image){ 
     $('.background').css("background-image", "url(images/"+image+".JPG)"); 
    });

來源

2014-03-13 09:00:28

更改div背景圖像爲具有jQuery的特定圖像

回答

相關問題