在開發網頁時,經常會需要記錄下用戶所做的一些操作,比如表單中的選項被選中或者取消選中。如果網頁使用jQuery來實現,可以很方便地將這些操作狀態保存下來。下面介紹如何使用jQuery來記住按鈕的選中狀態。
$(document).ready(function(){ // 1. 定義一個變量用于保存按鈕選中狀態 var checked = false; // 2. 獲取按鈕元素 var $btn = $('#btn'); // 3. 給按鈕綁定點擊事件 $btn.click(function(){ // 4. 切換按鈕的選中狀態 checked = !checked; // 5. 保存按鈕的選中狀態到本地存儲 localStorage.setItem('btnChecked', checked); // 6. 根據按鈕選中狀態改變樣式 if(checked){ $btn.addClass('active'); } else { $btn.removeClass('active'); } }); // 7. 頁面加載時恢復按鈕的選中狀態 var checkedStatus = localStorage.getItem('btnChecked'); if(checkedStatus == 'true'){ checked = true; $btn.addClass('active'); } else { checked = false; $btn.removeClass('active'); } });
以上代碼中,我們首先定義了一個變量checked
用于保存按鈕的選中狀態。接著獲取了按鈕元素,并且給按鈕綁定了點擊事件。當按鈕被點擊時,我們切換了按鈕的選中狀態,然后將當前選中狀態保存到了瀏覽器本地存儲中。接著根據當前選中狀態,改變按鈕的樣式。最后,在頁面加載時,我們從本地存儲中讀取按鈕的選中狀態,并且根據狀態設置按鈕的樣式。
.btn{ display: inline-block; padding: 10px 20px; background-color: #f2f2f2; border-radius: 5px; } .btn.active{ background-color: #ff9900; color: #ffffff; }
除了javascript代碼外,我們還需要添加一些CSS樣式來初始化按鈕的樣式,并且在選中狀態時應用不同的樣式。