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

Question

我有 6 个 Bootstrap 卡作为表单向导中的一个步骤，并且我有一个下一个按钮，该按钮转到下一页，然后返回，单击的卡保留其背景颜色，所以，当我回来时我的问题单击除先前单击的卡片之外的另一张卡片，然后再次单击“下一步”，然后返回最近单击的卡片，仅保留其颜色 例如，第一次如果我单击 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 函数即可。