拿着onclick jquery頁面重裝後

所以我一直在使用該網站的答案，但現在我需要一些幫助，所以在這裏。拿着onclick jquery頁面重裝後

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

編輯：所選的背景顏色現在發送到URL，並將保留重新加載的值，但如果我點擊第二個選項第一個選項被禁用，第二個被啓用，但第一個屬性仍然顯示在URL我需要有背景顏色一個字體顏色一個字體大小至少四個可能點擊一個又一個的線hieght

任何幫助我理解

這些按鈕

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

來源

2014-03-18 Vin

以及第一件事就是刪除所有文件準備功能，只是有一個把所有的點擊中......其冗餘碼的跑 –

你真的應該考慮使用類研究所的時候吃更多的時間ead並將此代碼重構爲只有一個點擊處理程序。 –

好吧，我可以做這些事情感謝您的快速回應 – Vin

這裏是我怎麼會approache這一點，它是通過把一個查詢字符串的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, " ")); 
}

功能被發現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; 
    } 
});

來源

2014-03-18 18:47:02 zerzer

再次進一步調查需要感謝的想法 – Vin

好吧我可以理解這一點併爲這個項目的目的，它會很好，所以感謝。我會盡力明天實施。再次感謝 – Vin

我很高興幫助 – zerzer

你可以做的是使點擊功能（e）獲得被點擊的目標。然後創建一個等於目標id的變量（其中包含要作爲顏色傳遞的名稱），然後將css設置爲該名稱。

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

來源

2014-03-18 18:37:00

謝謝，我會盡快嘗試這 – Vin

您將需要某種持久性（內存，數據庫，cookie等）。客戶只知道如何提出請求以及如何解釋收到的回覆。

執行此客戶端的一種簡單方法是使用本地存儲。這對用戶來說是本地的，並將存儲在用戶的硬盤上。看看這個鏈接的更多信息： http://www.w3schools.com/html/html5_webstorage.asp

下一個最簡單的方法（儘管完全不鼓勵）是將信息存儲在服務器的內存中。您可以通過緩存來完成此操作，但最終只要服務器重新啓動或緩存結束，所有信息就會丟失。

這樣做的最好方法是使用服務器處理的數據庫。這將確保您保存用戶的信息。

來源

2014-03-18 18:40:39 evasilevsky

非常感謝這將需要一些進一步的調查，但可能是一個好方法回合 – Vin

拿着onclick jquery頁面重裝後

回答

相關問題