色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery記住按鈕選中狀態

趙秋慧1年前6瀏覽0評論

在開發網頁時,經常會需要記錄下用戶所做的一些操作,比如表單中的選項被選中或者取消選中。如果網頁使用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樣式來初始化按鈕的樣式,并且在選中狀態時應用不同的樣式。