更改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"));
  }
});

尽管我在此示例中做出了一些假设，但我认为您可以处理;）