Javascript-基於URL的最後一個字符串動態更改背景圖像

我從@Ariel Davis獲得了一些幫助。我的URL是從一個模板動態生成的。我希望動態生成的頁面的背景圖像與URL匹配。Javascript-基於URL的最後一個字符串動態更改背景圖像

示例：URL：http://my.mysite.com/media/surfing，我想動態獲取我的/ assets/main/img /文件夾中的圖片surfing.jpg並將其顯示爲背景。

這是我目前的CSS：

.main_background{ 
background: url('/assets/main/img/athlete_background.jpg') no-repeat top center; 
background-size: cover; 
min-height:600px; 

}

我目前的Javascript：

$(function() { 
    //Change banner image 
    var loc = window.location.pathname 
    var img = loc.substring(
     loc.lastIndexOf("/") + 1, loc.length 
    ) + ".jpg" 
    $("main_background").css( 
     "backgroundImage", 
     "url(" webroot/assets/main/img/ + img + ")" 
    ) 
})

任何幫助將不勝感激，謝謝。

來源

2015-11-29 OHP

@Ariel戴維斯這裏是我的代碼，對不起新堆棧溢出，不知道如何編輯我的最後一個問題。 – OHP

您是否因爲某種原因使用JavaScript？在我看來，有服務器端解決方案（可能涉及佈局文件的小改動）可能會更好。 –

儘量只在結束標記之前添加此：

<script> 
    (function(){ 
     var loc = window.location.pathname; 
     var img = loc.substring(
      loc.lastIndexOf("/") + 1, loc.length 
      ) + ".jpg"; 

     $(".main_background").css("backgroundImage", "url('webroot/assets/main/img/" + img + "')"); 
    }()); 
</script>

來源

2015-11-29 09:26:24 jtsnr

我對後期回覆表示歉意，代碼現在顯示原始背景圖片的快速閃爍，然後它不顯示任何背景圖片。有任何想法嗎？ – OHP

我刪除了網址中的「webroot」，它工作得很好，謝謝你的協助，非常感謝。 – OHP

Javascript-基於URL的最後一個字符串動態更改背景圖像

回答

相關問題