當我選中它的復選框時，這個 jQuery 可以很好地更改我所有具有相同類 (userNumber1) 的 div 的背景顏色，但我需要它也將這些更改保存到localStorage，以便在每次新頁面時都在那里加載。
在 SO 中搜索了一周之后，我嘗試了幾種不同的選擇，但沒有一個能正常作業。雖然在大多數情況下我仍然可以更改背景顏色，但其中一些只保存選中的復選框而不保存背景顏色，其他的則相反，但大多數情況下都不將兩者都保存到 localStorage。
由于我根本不是專家，我現在真的不知道還能做什么。
這是我的 jQuery 函式：
jQuery(document).ready(function($) {
$('#option1').on('change', function() {
if ($(this).is(':checked')) {
$(".userNumber1").css('background-color', "#a7ddff");
} else {
$(".userNumber1").css('background-color', "#ffffff");
}
})
})
這是我的 HTML 代碼：
<div class="userNumber1"><input type="checkbox" id="option1"><label for="option1"></label></div>
我完全接受任何不同的方法，只要我可以將新的背景顏色和選中/未選中的復選框保存到localStorage。
預先感謝您的支持。
uj5u.com熱心網友回復：
這是一個作業版本 - 由于沙箱，我們無法在 Stackoverflow 上測驗 localStorage
https://plungjan.name/SO/lschk/
您需要將存盤的字串“true”或“false”轉換為布林值
腳本
// assuming a not set localStorage means a not checked checkbox at load time
let un1 = localStorage.getItem("userNumber1")
un1 = un1 === null ? false : un1 === "true"; // convert the string stored to boolean
jQuery(document).ready(function($) {
const $opt1 = $('#option1');
const changeColor = () => { // make a reusable function
const chk = $opt1.is(':checked');
localStorage.setItem("userNumber1", chk)
$(".userNumber1").css({
"background-color": chk ? "lightblue" : "yellow"
})
};
$opt1
.prop("checked", un1) // set the value from localStorage
.on('change', changeColor); // assign the listener
changeColor(); // trigger the initial
})
CSS
.userNumber1 {
background-color: yellow;
}
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="userNumber1">
<label><input type="checkbox" id="option1">Check me</label>
</div>
uj5u.com熱心網友回復：
當用戶單擊選項時，使用您的值設定本地存盤鍵：
localStorage.setItem('backgroundColor', '#FF00BB');
localStorage.setItem('optionId', 'option1');
在頁面加載時檢索值。還要選中相應的復選框：
$('.userNumber1').css('background-color', localStorage.getItem('backgroundColor'));
$('#' localStorage.getItem('optionId')).prop('checked', true);
來源：使用 jQuery 為復選框設定“已選中”
uj5u.com熱心網友回復：
jQuery(document).ready(function($) {
const myData = localstorage.getItem('myData') ? JSON.parse(localstorage.getItem('myData')) : {'checked':false,'backgroundColor':'#ffffff'};
$("#option1").attr('checked', myData.checked);
$(".userNumber1").css('background-color', myData.backgroundColor);
$('#option1').on('change', function() {
myData = {}
if ($(this).is(':checked')) {
$(".userNumber1").css('background-color', "#a7ddff");
myData.checked=true;
myData.backgroundColor = "#a7ddff";
} else {
$(".userNumber1").css('background-color', "#ffffff");
myData.checked=false;
myData.backgroundColor = "#ffffff";
}
localstorage.setItem('myData',JSON.stringify(myData))
})
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/387795.html
標籤：javascript 查询
上一篇：如何連接兩個盒子幾何圖形？