时间戳

首页 > 解决方案 > 即使在页面刷新时如何保留所选引导卡的边框？

javascript - 即使在页面刷新时如何保留所选引导卡的边框？

问题描述

我现在有 6 张引导卡，我编写了用于将每张卡详细信息存储在本地存储中的代码，并且单击卡时，现在我想要在页面刷新时获得边框我应该保留卡的边框我的 html 代码是：

<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>
<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>

我的 JS 代码：

$(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);
}

我的 codepen 链接是：https ://codepen.io/lakshmi123__/pen/xxbzwNP

标签： javascripthtml

解决方案

function initGoals() {
  goal = JSON.parse(localStorage.getItem("goal") || '[]');
  goalIds = goal.map(element => JSON.parse(element).id);
  goalIds.forEach(function(i){$("#room_"+i).addClass('blue');});
}
initGoals();

但是事件然后，您正在goalIds使用该函数填充变量，但是您也忘记了填充goal变量；）

推荐阅读