새로 고침시에도 클릭 한 카드의 배경색을 유지하는 방법은 무엇입니까?

사용자 12688320

양식 마법사의 한 단계로 6 개의 부트 스트랩 카드가 있고 다음 페이지로 이동 한 다음 다시 클릭 한 카드가 배경색을 유지하는 다음 버튼이 있으므로 다시 돌아올 때 다른 카드를 클릭하면 문제가 발생합니다. 이전에 클릭 한 카드가 아닌 다른 것을 다시 클릭하고 최근에 클릭 한 카드의 색상 만 유지합니다. 예를 들어 처음으로 1과 2 카드를 클릭하고 다음을 클릭하고 다시 돌아 오면 1과 2가 색상을 유지합니다. 그리고 다시 3, 4 카드를 클릭하고 다음을 다시 클릭하면 3, 4 카드는 1과 2가 아닌 색상을 유지하지만 4 개의 카드가 모두 색상을 유지해야합니다. 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입니다.

Arvind maurya

코드 조각을 찾으십시오.

새로 고침시에도 클릭 한 카드의 배경색을 유지하는 방법은 무엇입니까?

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 함수 코드를 살펴보십시오.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

페이지 새로 고침시에도 선택한 부트 스트랩 카드의 테두리를 유지하는 방법은 무엇입니까?

분류에서Dev

iPhone에서 한 번의 클릭으로 두 개의 uibutton의 배경색을 변경하는 방법은 무엇입니까?

분류에서Dev

링크 버튼의 배경색 속성을 클릭 한 경우에만 표시되도록 설정하는 방법은 무엇입니까?

분류에서Dev

앵커 (<a> </a>) 태그 클릭시 페이지 새로 고침을 방지하는 방법은 무엇입니까?

분류에서Dev

Flutter에서 버튼 클릭시 카드 뷰의 색상을 변경하는 방법은 무엇입니까?

분류에서Dev

한 번의 클릭으로 버튼의 배경색을 여러 번 변경하는 방법은 무엇입니까?

분류에서Dev

pyqt5 QTableWidget에서 선택하거나 클릭 한 셀의 배경색을 변경하는 방법은 무엇입니까?

분류에서Dev

자바 스크립트로 tr 태그를 포함하는 배열에서 클릭 한 셀의 색인을 얻는 방법은 무엇입니까?

분류에서Dev

버튼 클릭시 새 패널을 만드는 방법은 무엇입니까?

분류에서Dev

사용자가 다음 페이지 매김 페이지 또는 페이지 새로 고침을 클릭 한 후 확인란 상태 및 게시 값을 페이지에 저장하는 방법은 무엇입니까?

분류에서Dev

클릭 할 때 버튼의 색상을 변경하고 다음 클릭에서 기본 색상으로 되 돌리는 방법은 무엇입니까?

분류에서Dev

Jquery / Javascript : 새로 고침시 시간 제한 재설정을 방지하는 방법은 무엇입니까?

분류에서Dev

JavaFX에서 fxml을 사용하여 버튼을 클릭 한 후 BorderPane의 한 부분을 다시로드하는 방법은 무엇입니까?

분류에서Dev

JS 애니메이션을 클릭 한 입력 필드로 제한하는 방법은 무엇입니까?

분류에서Dev

로드시 배경색을 흐리게하는 방법은 무엇입니까?

분류에서Dev

angular2에서 수동 브라우저 새로 고침 / 다시로드 후 html5 제어 값을 유지하는 방법은 무엇입니까?

분류에서Dev

"새로 고침"오른쪽 클릭 동작을 얻는 방법은 무엇입니까?

분류에서Dev

"새로 고침"오른쪽 클릭 동작을 얻는 방법은 무엇입니까?

분류에서Dev

NSIS : 다음 / 뒤로 버튼을 클릭 한 후 이전 대화 상자의 입력 값을 유지하는 방법은 무엇입니까?

분류에서Dev

양식 내에서 새로 고침시 PHP 드롭 다운 선택을 유지하는 방법은 무엇입니까?

분류에서Dev

버튼 클릭을 에뮬레이션 한 후 웹 사이트의 소스 코드를 다운로드하는 방법은 무엇입니까?

분류에서Dev

페이지로드 또는 새로 고침시 임의의 PHP 문자열을 인쇄하거나 에코하는 방법은 무엇입니까?

분류에서Dev

2 개의 배열을 병합하고 Union과 같은 고유 한 값으로 새 배열을 만드는 방법은 무엇입니까?

분류에서Dev

iron-router : 경로를로드 한 후 새로 고침을 누를 때와 같이 경로를 완전히로드하는 방법은 무엇입니까?

분류에서Dev

눈의 피로; 새로 고침 빈도를 120Hz로 변경하는 방법은 무엇입니까?

분류에서Dev

한 양식을 버튼 클릭하고 다른 클래스의 문자열로 텍스트 상자의 값을 얻는 방법은 무엇입니까?

분류에서Dev

전체 레이아웃에 반투명 (반투명) 모양을 부여하고 Android의 도구 모음에서 아이콘을 클릭 한 후 다시 정상적으로 보이게 만드는 방법은 무엇입니까?

분류에서Dev

클릭 JavaScript로 동적으로 생성 된 div의 배경을 변경하는 방법은 무엇입니까?

분류에서Dev

WebStorm에 탭을 만들지 않고 클릭 한 번으로 만 파일을 미리 보도록하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    페이지 새로 고침시에도 선택한 부트 스트랩 카드의 테두리를 유지하는 방법은 무엇입니까?

  2. 2

    iPhone에서 한 번의 클릭으로 두 개의 uibutton의 배경색을 변경하는 방법은 무엇입니까?

  3. 3

    링크 버튼의 배경색 속성을 클릭 한 경우에만 표시되도록 설정하는 방법은 무엇입니까?

  4. 4

    앵커 (<a> </a>) 태그 클릭시 페이지 새로 고침을 방지하는 방법은 무엇입니까?

  5. 5

    Flutter에서 버튼 클릭시 카드 뷰의 색상을 변경하는 방법은 무엇입니까?

  6. 6

    한 번의 클릭으로 버튼의 배경색을 여러 번 변경하는 방법은 무엇입니까?

  7. 7

    pyqt5 QTableWidget에서 선택하거나 클릭 한 셀의 배경색을 변경하는 방법은 무엇입니까?

  8. 8

    자바 스크립트로 tr 태그를 포함하는 배열에서 클릭 한 셀의 색인을 얻는 방법은 무엇입니까?

  9. 9

    버튼 클릭시 새 패널을 만드는 방법은 무엇입니까?

  10. 10

    사용자가 다음 페이지 매김 페이지 또는 페이지 새로 고침을 클릭 한 후 확인란 상태 및 게시 값을 페이지에 저장하는 방법은 무엇입니까?

  11. 11

    클릭 할 때 버튼의 색상을 변경하고 다음 클릭에서 기본 색상으로 되 돌리는 방법은 무엇입니까?

  12. 12

    Jquery / Javascript : 새로 고침시 시간 제한 재설정을 방지하는 방법은 무엇입니까?

  13. 13

    JavaFX에서 fxml을 사용하여 버튼을 클릭 한 후 BorderPane의 한 부분을 다시로드하는 방법은 무엇입니까?

  14. 14

    JS 애니메이션을 클릭 한 입력 필드로 제한하는 방법은 무엇입니까?

  15. 15

    로드시 배경색을 흐리게하는 방법은 무엇입니까?

  16. 16

    angular2에서 수동 브라우저 새로 고침 / 다시로드 후 html5 제어 값을 유지하는 방법은 무엇입니까?

  17. 17

    "새로 고침"오른쪽 클릭 동작을 얻는 방법은 무엇입니까?

  18. 18

    "새로 고침"오른쪽 클릭 동작을 얻는 방법은 무엇입니까?

  19. 19

    NSIS : 다음 / 뒤로 버튼을 클릭 한 후 이전 대화 상자의 입력 값을 유지하는 방법은 무엇입니까?

  20. 20

    양식 내에서 새로 고침시 PHP 드롭 다운 선택을 유지하는 방법은 무엇입니까?

  21. 21

    버튼 클릭을 에뮬레이션 한 후 웹 사이트의 소스 코드를 다운로드하는 방법은 무엇입니까?

  22. 22

    페이지로드 또는 새로 고침시 임의의 PHP 문자열을 인쇄하거나 에코하는 방법은 무엇입니까?

  23. 23

    2 개의 배열을 병합하고 Union과 같은 고유 한 값으로 새 배열을 만드는 방법은 무엇입니까?

  24. 24

    iron-router : 경로를로드 한 후 새로 고침을 누를 때와 같이 경로를 완전히로드하는 방법은 무엇입니까?

  25. 25

    눈의 피로; 새로 고침 빈도를 120Hz로 변경하는 방법은 무엇입니까?

  26. 26

    한 양식을 버튼 클릭하고 다른 클래스의 문자열로 텍스트 상자의 값을 얻는 방법은 무엇입니까?

  27. 27

    전체 레이아웃에 반투명 (반투명) 모양을 부여하고 Android의 도구 모음에서 아이콘을 클릭 한 후 다시 정상적으로 보이게 만드는 방법은 무엇입니까?

  28. 28

    클릭 JavaScript로 동적으로 생성 된 div의 배경을 변경하는 방법은 무엇입니까?

  29. 29

    WebStorm에 탭을 만들지 않고 클릭 한 번으로 만 파일을 미리 보도록하는 방법은 무엇입니까?

뜨겁다태그

보관