即使在刷新时如何保留点击卡片的背景颜色?

我有一个 6 个引导卡作为表单向导中的一个步骤，我有一个下一步按钮，它转到下一页，然后返回点击的卡保留其背景颜色，所以，当我回来时，我的问题不是以前点击的卡，然后再次单击下一步，然后返回最近点击的卡只保留其颜色例如第一个时间如果我单击 1 和 2 卡并单击下一步，然后再次返回，我的 1 和 2 保留其颜色，当我再次单击 3 和 4 卡并再次单击下一步并返回时，3 和 4 卡保留其颜色，不是 1 和 2，但我需要所有四张卡保留其颜色我的 HTML 代码是：

$(document).ready(function() {
// goals
$("#room_1").click(function() {
$("#room_1").toggleClass("blue")
});
$("#room_2").click(function() {
$("#room_2").toggleClass("blue")
});
$("#room_3").click(function() {
$("#room_3").toggleClass("blue")
});
$("#room_4").click(function() {
$("#room_4").toggleClass("blue")
});
$("#room_5").click(function() {
$("#room_5").toggleClass("blue")
});
$("#room_6").click(function() {
$("#room_6").toggleClass("blue")
});
$("#room_7").click(function() {
$("#room_7").toggleClass("blue")
});
$("#room_8").click(function() {
$("#room_8").toggleClass("blue")
});
$("#room_9").click(function() {
$("#room_9").toggleClass("blue")
});
});
var goal = []
var goalIds = [];
function getGoal(id) {
if (goal.length > 0) {
var data = {
id: id,
content: $("#cont_" + id).text()
}
var x = JSON.stringify(data)
var index = goal.indexOf(x)
if (index == -1) {
goal.push(x)
} else {
goal.splice(index, 1)
}
} else {
var data = {
id: id,
content: $("#cont_" + id).text()
}
var x = JSON.stringify(data)
goal.push(x)
}
localStorage.setItem("goal", JSON.stringify(goal))
goalIds = goal.map(element => JSON.parse(element).id);
console.log(goalIds)
issample();
}
function issample() {
$("#goal").val(goalIds);
console.log(goalIds)
}
function initGoals() {
var storedNames = JSON.parse(localStorage.getItem("goal") || '[]');
goalIds = storedNames.map(element => JSON.parse(element).id);
}
$(function() {
let storedNames = JSON.parse(localStorage.getItem("goal") || '[]');
$.each(storedNames, function(index, value) {
let temp = JSON.parse(value);
$('#room_' + temp['id']).addClass("blue");
console.log($('#' + temp['id']).attr('id'));
});
})

/* navbar*/
.navbar{
	height:80px;
}
/*container0*/
.container0{
height:550px;
}
/*container*/
.container1{
	background-color:white ;
	width:450px;
}
/*navbar-brand*/
.navbar-brand{
font-family: 'Monda', sans-serif;
}
/*container-fluid*/
.container-fluid{
	 background-color: blue;
	 height:1000px;
}
/*button1*/
.btn1{
background-color: #000080;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
/*button2*/
.btn2 {
background-color: white;
color: black; 
border: 2px solid #000080;
width:180px;
}
.btn2:hover {
background-color: #000080;
color:white;
}
/*container-3*/
.container-3{
display:inline-block;
width:600px;
height:500px;

}
.link{
{ color: black; }
}
/*card-6*/
.card6{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card6:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/*card-4*/
.card4{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card4:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/*Button4*/
.btn4{
width:300px;
background-color: white;
}
a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:hover {
background-color: #ddd;
color: black;
}
/*previous button*/
.previous {
background-color:white;
color: black;
width:300px;
display:block;
border: 2px solid #000080;
}
/*next button*/
.next {
background-color: white;
color: black;
width:300px;
display:block;
border: 2px solid #000080;
}
/* round class*/
.round {
border-radius: 50%;
}
/*.btn card*/
.btncard{
background-color: #000080;
}
/*.blue class*/
.blue{
border: 2px solid #000080;
}
/*range slider*/
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
border-radius: 6px;
height: 10px;
width: 600px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15,  #C5C5C5),
color-stop(0.15, #C5C5C5)
);
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
border-radius: 50%; 
background-color: #E9E9E9;
border: 3px solid #CECECE;
height: 25px;
width: 15px;
}
/*container-11*/
.container-11{
width:600px;
background-color: white;
height:800px;
margin-left: auto;
margin-right: auto;
}
/*container1*/
.con1{
width:800px;
height:400px;
border:1px solid grey;
}
/*register*/
#register{
background-color:  #000080;
}
/*messages*/
.messages{
color:orange;
}
.messages h5{
font-style: italic;
}
#name_error{
color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-4" onclick="getGoal(1)">
<div class="card4 mt-3" id="room_1" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_1"><b>I am redecorating</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(2)">
<div class="card4 mt-3" id="room_2" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_2"><b>I am Moving</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(3)">
<div class="card4 mt-3" id="room_3" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_3"><b>I need help with a layout</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(4)">
<div class="card4 mt-3" id="room_4" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_4"><b>I am looking for a species</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(5)">
<div class="card4 mt-3" id="room_5" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_5"><b>I am moving with someone</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(6)">
<div class="card4 mt-3" id="room_6" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_6"><b>Other</b></p>
</div>
</center>
</div>
</div>
</div>
<!--Loop ends-->
<a class="link mt-3"><u>Dont see your room?</u></a>
</p>
<div class="row mb-3">
<div class="col-4 mr-5">
<a href="/modsy/rooms/" class="previous" onClick="history.go(-1);">&laquo; Home</a>
</div>
<div class="col-4 ml-5">
<a href="/modsy/furniture" class="next">Next &raquo;</a></div>
</div>
</div>

代码笔代码 ishttps://codepen.io/lakshmi123__/pen/xxbzwNP

请找到代码片段

即使在刷新时如何保留点击卡片的背景颜色？

function getGoal(id) {
debugger;
var goalsArray = JSON.parse(localStorage.getItem("goal"));
var b = goalsArray.filter(function (x) {
debugger;
return x.id == id;
});
if (goalsArray != null) {
var data = {
id: id,
content: $("#cont_" + id).text()
}
if (b.length >= 1) {
//then delete
var filtredArray = goalsArray.filter(function (x) {
return x.id != b[0].id;
})
goalsArray = filtredArray;
}
else {
//add
goalsArray.push(data);
}
}
localStorage.setItem("goal", JSON.stringify(goalsArray))
issample();
}

如果你的代码 getGoal 本地存储正在重置。就像页面刷新有时旧值被删除一样。看看上面的代码getGoal函数。

我希望你创建一个数组来保存所有已检查并存储在 cookie 中的 id。一旦您再次返回此页面，请使用此数组获取所有 ID 以供选择。

要从 Cookie 中设置和获取数据，请使用此链接。

相关内容

最新更新

热门标签：