我想保持一個類通過頁面jQuery更改

我不知道這是否可以完成。我是新的jQuery :)我想保持一個類通過頁面jQuery更改

我找到了通過單擊圖像來更改背景的方法。但是，當我刷新頁面或更改爲其他頁面時，背景將更改爲原始頁面。

你知道是否有辦法選擇新的背景嗎？

這裏是我的代碼：

<script> 
    $(document).ready(function(){ 
     $("#mood-clasico").click(function(){ 
     $("#chef, #ranchos, #contacto").removeClass("parallax-4, parallax-2"); 
     $("#chef, #ranchos, #contacto").addClass("parallax-1"); 
     }); 
    }); 
    $(document).ready(function(){ 
     $("#mood-chef").click(function(){ 
     $("#chef, #ranchos, #contacto").removeClass("parallax-1, parallax-2"); 
     $("#chef, #ranchos, #contacto").addClass("parallax-4"); 
     }); 
    }); 
    $(document).ready(function(){ 
     $("#mood-kids").click(function(){ 
     $("#chef, #ranchos, #contacto").removeClass("parallax-1, parallax-4"); 
     $("#chef, #ranchos, #contacto").addClass("parallax-2"); 
     }); 
    }); 
</script>

來源

2015-09-06 iTux

默認情況下，Web是無狀態的，因此您需要在某處存儲值以便再次閱讀。看看cookie，數據庫，localStorage等。 – j08691

謝謝@ j08691我會嘗試用cookies :) – iTux

如果你想在窗口被關閉或頁面已經被導航離開（到不同的域）之後的狀態生存，使用localStorage的;否則，使用sessionStorage（在域中仍然存在刷新和導航）。無論哪種方式，您都需要將css類存儲在一個持久變量中，並使用它來代替字符串，這可以幫助干擾代碼。會話存儲是一個稍微簡單一些，但你的用戶可能會更愛你使用localStorage的 - 的實現將是這樣的：

$(document).ready(function() { 
    var userPref = localStorage.getItem("bg-class") || 'your-default'; 
    $("#chef, #ranchos, #contacto").addClass(userPref); 

    $("#mood-clasico").click(function(){ 
    swapPref("parallax-4", "parallax-2", "parallax-1"); 
    }); 
    $("#mood-chef").click(function(){ 
    swapPref("parallax-1", "parallax-2", "parallax-4"); 
    }); 
    $("#mood-kids").click(function(){ 
    swapPref("parallax-4", "parallax-2", "parallax-1"); 
    }); 

    function swapPref(out1, out2, inn) { 
    $("#chef, #ranchos, #contacto") 
    .removeClass(userPref) 
    .removeClass(out1) 
    .removeClass(out2) 
    .addClass(inn); 
    localStorage.setItem("bg-class", inn); 
    } 
});

更多的持久性（就像在不同的瀏覽器或設備），你會想查看文件系統API或將設置存儲在數據庫中，但基於您的問題，似乎這些選項不值得這些缺點。我遺漏了一些錯誤處理和你可能想要包括的東西，但是我絕對推薦使用mozilla檢查using the web storage api，它實際上包含了一個類似的例子。

來源

2015-09-06 07:53:31

非常感謝@ J.Mett這是工作:)我真的很感激:)只是一個疑問，它只是在刷新頁面後才工作，有沒有辦法在時間點擊該選項？再次感謝:) – iTux

哎呀！對不起，我忘了初始類添加'userPref'，這是從未刪除。我做了一個應該工作的編輯 –

非常感謝@ J.Mett：D它現在正在工作:)我將檢查您提供的頁面以瞭解更多關於它的信息:) – iTux

-1

只用jQuery這是不可能的，你必須保存價值
嘗試使用會話，cockies，外部文件或數據庫

來源

2015-09-06 03:14:25

謝謝@AnonyPIng會嘗試用cookies :) – iTux

使用jQuery的餅乾插件做到這一點，這裏

細節https://github.com/carhartl/jquery-cookie

然後設置cookie的，

$.cookie("changedBackground", 'true');

和頁面刷新後，這個檢查必須做

if($.cookie("changedBackground")=='true'){ 
//keep your changed background 
}

來源

2015-09-06 04:59:39 sajanyamaha

哦！非常感謝@sajanyamaha我會試試:) – iTux

我想保持一個類通過頁面jQuery更改

回答

相關問題