Question

我正在创建一个多页面网站，在开头页面上我有一个div，里面有两个按钮。单击这些按钮可更改主题。我有它所以当你在第一页上点击黑暗时，它会将主题更改为黑暗。我接下来想要的是当你进入主题遗留的下一页时。我也想要它，所以如果你改变第二页上的主题，然后点击回到主页或第三页的主页等

现在正在发生的事情是我成功地在第一页上更改主题但是当我转到第二页时，div询问您想要的主题是什么？

这是我的代码

var themes = {
  default : "assets/grey.jpg",
  dark    : "assets/dark.jpg",
  light   : "assets/background.jpg"
};




var background_image = localStorage.getItem("background-image")


if (background_image !== "assets/grey.jpg"){
  $('.popups').css('display', 'block')
} else if(background_image === "assets/dark.jpg" || background_image === "assets/background.jpg"){
  $('.popups').css('display', 'none')
}




$("#dark, #light, #default").click(function(){

    $("body").css( "background-image" , "url("+ themes[this.id] +")" );
    $(".popups").toggle();
    localStorage.setItem("background-image",  themes[this.id]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
  <title>United Photographers Initiative</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">

</head>
<body>

  <div class = "navbar navbar-default navbar-static-top">
    <div class="container">
      <a href ="#" class="navbar-brand">U.P.I.</a>
      <img src="assets/camera.png" class="pull-left">
      <button class="navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>


      <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle = "dropdown">Options<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li id=default><a  href="#">Change Theme</a></li>
              </ul>
          </li>
        </ul>
      </div>
  </div>
</div>



<div class="container">



<div class="popups">
  <p>
    Select your theme:<br><br>
    <button id="dark">DARK</button>
    <button id="light">LIGHT</button>
  </p>
</div>

  <div class="jumbotron text-center">
    <h1>Welcome to the <span class="h1Color">U</span>nited <span class="h1Color">P</span>hotographers <span class="h1Color">I</span>nitiative</h1>
    <p>This free community for experienced photographers to give back to those who are just starting out, as well as those photographers who are just starting out or are finding it hard to find new locations to shoot when at home or traveling.</p>




      <a href="login.html"<button type="button" class="btn btn-danger ">Enter Site</button></a>


  </div>
</div>




<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <p class="navbar-text pull-left">
      Site built by Self Aware Machines
    </p>

<p>
  <div class="input-group col-lg-3 pull-right">
    <input type="text" class="form-control" placeholder="Search Site"/>
    <span class="input-group-btn">
      <button class="btn btn-primary" type="button">Search</button>
    </span>

  </div>
</p>

  </div>
</div>







<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script>

// $("body").css( "background-image" , "url("+ localStorage.getItem("background-image") +")" );



</script>

</body>
</html>

Answer 1

让我引导您完成代码：

var themes = {
  default : "assets/grey.jpg",
  dark    : "assets/dark.jpg",
  light   : "assets/background.jpg"
};




var background_image = localStorage.getItem("background-image")

停止！首先，您假设localStorage已设置，如果不是localStorage将返回null请尝试此操作：

var background_image;
if(localStorage.getItem("background-image") {
   background_image = localStorage.getItem("background-image")
} else {
   background_image = themes.defualt
}

好的，继续说下去：

if (background_image !== "assets/grey.jpg"){
  $('.popups').css('display', 'block')
} else if(background_image === "assets/dark.jpg" || background_image === "assets/background.jpg"){
  $('.popups').css('display', 'none')
}

在这里，您要说的是背景图像是否为defualt，然后显示弹出窗口，否则不显示它们。但是，最好将它实现到if条件中，所以：

if(localStorage.getItem("background-image")) {
   background_image = localStorage.getItem("background-image")
} else {
   background_image = themes.defualt
   $('.popups').css('display', 'block')
}

但要执行此操作，您必须通过默认将.popups设置为display: none，然后继续：

$("#dark, #light, #default").click(function(){

    $("body").css( "background-image" , "url("+ themes[this.id] +")" );
    $(".popups").toggle();
    localStorage.setItem("background-image",  themes[this.id]);
});

最后一件事：$(".popups").toggle()应为$(".popups").hide()，以确保您隐藏它。

希望我能帮忙！

Answer 2

background_image !== "assets/grey.jpg"

可能会将其更改为

background_image === "assets/grey.jpg"

更好的只是：

if(background_image === "assets/dark.jpg" || background_image === "assets/background.jpg"){
  $('.popups').hide() // the same as setting display: none
}

无需设置div显示：阻止，因为它是默认阻止。

多页网站localstorage获取和设置

2 个答案: