更改div上多個頁面的CSS背景圖像？

Question

我有這個CSS：

div[data-role="page"]{ 
min-height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
border: 0px;
background-image:url('../img/blue_background.jpg');}

這是我的功能：

注意：在函數中初始化的變量上，val（）來自選擇框，更改后將保存在localStorage中。

function saveParam(){
var result=$("#param_results option:selected").val();
var scan=$("#param_scan option:selected").val();
var scan_speed=$("#param_scan_speed option:selected").val();
var scan_bg=$("#param_scan_bg option:selected").val();
var font=$("#param_font option:selected").val();
var screen_bg=$("#param_screen_bg option:selected").val();
var waiting_time=$("#param_waiting_time option:selected").val();

window.localStorage.setItem("param_results", result);
window.localStorage.setItem("param_scan", scan);
window.localStorage.setItem("param_scan_speed", scan_speed);
window.localStorage.setItem("param_scan_bg", scan_bg);
window.localStorage.setItem("param_font", font);
window.localStorage.setItem("param_screen_bg", screen_bg);
window.localStorage.setItem("param_waiting_time", waiting_time);


//$('div[data-role="page"]').css("background-image", "url('../img/green.jpg')");

back();}

我有幾個html頁面，每個頁面都有div [data-role =“ page”]，所以所有頁面都有相同的背景，等等...但是當param_screen_bg更改時，我想將背景圖像永久更改為另一個但它不起作用。 最后的注釋行只是我嘗試更改背景的嘗試，但仍然無法正常工作。

編輯： https ： //jsfiddle.net/42zbcbge/1/

在這個jsfiddle上是我想要的一個小例子。 當您按保存按鈕時，我也想更改CSS上的背景，因此也要更改頁面上的背景，但是它沒有改變

Answer 1

嘿，我不完全了解您添加的代碼。 但是，我想您正在使用selectbox並在option的值中傳遞圖像url。 因此，在提取時，您應該僅使用selectbox的ID，例如：

var screen_bg=$("#param_screen_bg").val();

代替

var screen_bg=$("#param_screen_bg option:selected").val();

var bg_image_value = localStorage.getItem("param_screen_bg");

if(bg_image_value != null && bg_image_value != '') {
   $('div[data-role="page"]').css("background-image", 'url('+bg_image_value+')' ); 
}

可以嘗試在Codepen或jsfiddle中添加代碼。

Answer 2

您正在localStorage中setting值，但您似乎從未get 'm。 因此，您可以例如執行以下操作：

jQuery().ready(function() //do when page is loaded
{
  if(window.localStorage.getItem("param_screen_bg") !== null) //check if value is set in localStorage
  {
    //get value from localStorage and apply it to the div:
    $('div[data-role="page"]').css("background-image", window.localStorage.getItem("param_screen_bg"));
  }
});

盡管我在此示例中做出了一些假設，但我認為您可以處理;）