頁面重新加載后按住onclick jQuery

Question

因此，我已經在該網站上使用一段時間了，但是我需要一些幫助，所以就在這里。

我已經使用jquery在按鈕上創建了一堆onclick事件，並使用它們來動態更改網站上的CSS。 我遇到的問題是我希望用戶在重新加載頁面或調用第二個頁面時使用選擇的顏色和字體大小設置。

編輯：所選的背景色現在發送到url，並且將保留重載時的值，但是如果我單擊第二個選項，則禁用第一個選項，並且啟用第二個選項，但是第一個屬性仍顯示在url中，我需要至少四次點擊，一次為背景色，一次為字體顏色，一次為字體大小，一次為行高

任何幫助，我將不勝感激

這些是按鈕

<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

您可以做的是使點擊函數獲得被點擊目標。 然后使一個變量等於目標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

這是我將如何處理此問題的方法，這是通過將查詢字符串放入您的url中，這是一個簡單的示例：

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

該函數位於此處，然后在您的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; 
   }
});