Question

所以我现在一直在使用该网站获得答案，但我需要一些帮助，所以在这里。

我使用jquery在按钮上创建了一堆onclick事件，并使用它们动态更改我网站上的css。我遇到的问题是，我希望在重新加载页面或调用第二页时，可以使用用户选择的颜色和字体大小设置。

编辑：所选的背景颜色现在发送到网址，并将在重新加载时保留该值，但是如果我单击第二个选项，则第一个选项被禁用，第二个选项被启用但第一个属性仍显示在网址中需要至少有四个可能的点击一个用于背景颜色一个用于字体颜色一个用于字体大小而一个用于行高度

任何帮助我都会感激

这些是按钮

<div id="bc">
 Background Colour
  <button id="bcyellow">yellow</button>
  <button id="bcblue">blue</button>
  <button id="bcblack">black</button>
  <button id="bcwhite">white</button>
</div>
<div id="tc">
 Text Colour
  <button id="tcyellow">yellow</button>
  <button id="tcblue">blue</button>
  <button id="tcblack">black</button>
  <button id="tcwhite">white</button>
</div>
<div id="fs">
 Font Size  
  <button id="fsdown">Default</button>
  <button id="fsup">Big</button>
</div>
<div id="lh">
 Line Height
  <button id="lhdown">Default</button>
  <button id="lhup">Wide</button>
</div>

这是jquery

function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}


 $(document).ready(function(){

    //change background colour to yellow
 $(function(){
 $("#bcyellow").click(function(){ window.location = document.URL+"?background-color=yellow"; });
    switch(getParameterByName("background-color")){
      case "yellow" : 
         $("body").css("background-color","rgba(247, 233, 107, 1)");
         break; 
       default : 
       //your default color
        break; 
   }
 });

    //change background colour to blue

  $(function(){
  $("#bcblue").click(function(){ window.location = document.URL+"?background-color=blue"; });
    switch(getParameterByName("background-color")){
      case "blue" : 
       $("body").css("background-color","rgba(110, 165, 236, 1)");
        break; 
      default : 
        //your default color
        break; 
   }
 });

    //change background colour to green
  $(function(){
  $("#bcgreen").click(function(){ window.location = document.URL+"?background-color=green"; });
    switch(getParameterByName("background-color")){
      case "green" : 
        $("body").css("background-color","rgba(156, 255, 174, 1)");
        break; 
      default : 
        //your default color
        break; 
   }
 });
    //change background colour to pink
  $(function(){
  $("#bcpink").click(function(){ window.location = document.URL+"?background-color=pink"; });
    switch(getParameterByName("background-color")){
      case "pink" : 
        $("body").css("background-color","rgba(245, 175, 247, 1)");
        break; 
      default : 
        //your default color
        break; 
   }
 });
    //change background colour to black
 $(function(){
  $("#bcblack").click(function(){ window.location = document.URL+"?background-color=black"; });
    switch(getParameterByName("background-color")){
      case "black" : 
        $("body").css("background-color","rgba(0, 0, 0, 1)");
        break; 
      default : 
        //your default color
        break; 
   }
 });
    //change background colour to white
 $(function(){
  $("#bcwhite").click(function(){ window.location = document.URL+"?background-color=white"; });
    switch(getParameterByName("background-color")){
      case "white" : 
        $("body").css("background-color","rgba(255, 255, 255, 1)");
        break; 
      default : 
        //your default color
        break; 
   }
 });
    //change text colour to green 
 $(function(){
   $('#tcgreen').click(function(){ window.location = document.URL+"?color=green"; }); 
   switch(getParameterByName("color")){
      case "green" : 
        $('body').css("color", "rgba(0, 150, 0, 1)") ; 
        break; 
      default : 
        //your default color 
        break; 
   }
 }); 
    //change text colour to blue
 $(function(){
   $('#tcblue').click(function(){ window.location = document.URL+"?color=blue"; }); 
   switch(getParameterByName("color")){
      case "blue" : 
        $('body').css("color", "rgba(0, 0, 171, 0.9)"); 
        break; 
       default : 
        //your default color 
        break; 
   }
 }); 
    //change text colour to black
 $(function(){
   $('#tcblack').click(function(){ window.location = document.URL+"?color=black"; }); 
   switch(getParameterByName("color")){
      case "black" : 
        $('body').css('color', 'rgba(0, 0, 0, 1)'); 
        break; 
      default : 
        //your default color 
        break; 
   }
 }); 
    //change text colour to white
 $(function(){
   $('#tcwhite').click(function(){ window.location = document.URL+"?color=white"; }); 
   switch(getParameterByName("color")){
      case "white" : 
        $('body').css('color', 'rgba(255, 255, 255, 1)'); 
        break; 
      default : 
        //your default color 
        break; 
   }
 }); 
    //change text size increment 
 $(function(){
   $('#fsup').click(function(){ window.location = document.URL+"?font-size3em"; }); 
   switch(getParameterByName("font-size")){
      case "3em" : 
        $("body").css("font-size","3em");
        break; 
     default : 
        //your default size
       break; 
   }
 }); 
    //reset text size
 $(function(){
    $('#fsdown').click(function(){ window.location = document.URL+"?font-size=1em"; }); 
   switch(getParameterByName("font-size")){
      case "1em" : 
        $("body").css("font-size","1em");
        break; 
      default : 
        //your default font-size
        break; 
   }
 }); 
    //change line height to wide
  $(function(){
   $('#lhup').click(function(){ window.location = document.URL+"?line-height=wide"; }); 
   switch(getParameterByName("line-height")){
      case "wide" : 
        $("body").css("line-height","1.5");
        break; 
      default : 
        //your default line-height
        break; 
   }
 }); 
    //reset line height
 $(function(){
    $('#lhdown').click(function(){ window.location = document.URL+"?line-height=default"; }); 
   switch(getParameterByName("line-height")){
      case "default" :
        $("body").css("line-height","1");
         break; 
       default : 
         //your default line-height
        break; 
   }
  }); 
  });

Answer 1

你可以做的是使点击功能（e）获得被点击的目标。然后使变量等于目标id（其中包含您想要传递的颜色的名称），然后将css设置为该名称。

$("#lhdown").click(function(e){
    $("body").css("line-height","1");
    var x = e.target.id;
    $('#lhdown').css({'color': x});
});

Answer 2

您需要某种持久性（内存，数据库，cookie等）。客户端只知道如何发出请求以及如何解释它收到的响应。

执行此客户端的一种简单方法是使用本地存储。这是用户本地的，并将存储在用户的硬盘上。查看此链接以获取更多信息： http://www.w3schools.com/html/html5_webstorage.asp

下一个最简单的方法（尽管完全不鼓励）是将信息存储在服务器的内存中。您可以通过缓存执行此操作，但最终在服务器重新启动或缓存结束后，所有信息都将丢失。

执行此操作的最佳方法是使用服务器处理的数据库。这将确保您按用户保留信息。

Answer 3

这是我如何处理这个问题，通过在你的网址中添加一个查询字符串就是一个简单的例子：

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

找到函数here 然后在您的jquery代码中，您可以执行以下操作：

$(function(){
   $('#yellow').click(function(){ window.location = document.URL+"?color=yellow"; }); 
   switch(getParameterByName("color")){
      case "yellow" : 
        $('body').css('color', 'yellow') ; 
        break; 
      default : 
        //your default color 
        break; 
   }
});

页面重新加载后按住onclick jquery

3 个答案: