如何在刷新时保持被点击卡片的背景颜色？

Question

我有一个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>

​

Codepen代码是https://codepen.io/lakshmi123__/pen/xxbzwNP

Answer 1

请查找代码片段

How to retain the background color of clicked cards even on refresh?

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函数代码。

Answer 2

我更喜欢您创建一个数组，其中包含所有已检查并存储在cookie中的in。当您再次返回到此页面时，使用此数组来获取select的所有ids。

对于从cookies设置和获取数据，请使用此link。