여러개의 버튼 선택 후 상태 유지. 도와주세요 ㅜㅜ 채택완료
위 이미지와 같이 여려개의 버튼을 선택하면 선택한 버튼만 색상이 변하는데요, 새로고침해도 색상을
유지할 수 있게끔 localstorage 로 만들어 보려구 하는데 잘 안됩니다.
</strong></p>
<p> </p>
<p>let ddd = document.querySelectorAll(".btnChk");</p>
<p> </p>
<p>for(let i = 0; i < ddd.length; i++) {</p>
<p> $(ddd[i]).addClass("kk"+i);</p>
<p>
</p>
<p> ddd[i].addEventListener("click", function () {</p>
<p> </p>
<p> $(this).toggleClass('active');</p>
<p> if ( $(this).hasClass("active") === true ) {</p>
<p> localStorage.setItem("add", "true");</p>
<p> } else {</p>
<p> localStorage.setItem("add", "false");</p>
<p> }</p>
<p> </p>
<p> });</p>
<p> </p>
<p>}</p>
<p> </p>
<p>if (localStorage.getItem("add") === "true") {</p>
<p> $('.btnChk').addClass("active");</p>
<p>}else {</p>
<p> $('.btnChk').removeClass("active");</p>
<p>} </p>
<p> </p>
<p><strong>
답변 4개
댓글을 작성하려면 로그인이 필요합니다.
에고 내가 완전히 문제를 잘못 독해했네요.
처음부터 건드리지를 말았어야 하는 건데... 여튼 코드 다 짜 놓고 자러 갑니다.
</p>
<p><style>
#myDiv { width:100%; max-width:600px; border:1px solid #888888; box-sizing:border-box; margin:0 auto; }
#myDiv div { width:calc(100%/3); padding:1px; background-color:#888888; box-sizing:border-box; float:left; }
#myDiv span { display:block; color:#ffffff; padding:15px; text-align:center; background-color:#000000; cursor:pointer; }
</style>
<div id="myDiv">
<div><span>01</span></div> <div><span>02</span></div> <div><span>03</span></div>
<div><span>04</span></div> <div><span>05</span></div> <div><span>06</span></div>
<div><span>07</span></div> <div><span>08</span></div> <div><span>09</span></div>
<div><span>10</span></div> <div><span>11</span></div> <div><span>12</span></div>
<div><span>13</span></div> <div><span>14</span></div> <div><span>15</span></div>
<div><span>16</span></div> <div><span>17</span></div> <div><span>18</span></div>
</div></p>
<p><script>
if (sessionStorage["my"]) document.querySelector("#myDiv").innerHTML = sessionStorage["my"];
mySpan = document.querySelectorAll("#myDiv span");
for (i in mySpan) {
mySpan[i].num = i;
mySpan[i].onclick = function() {
this.dataset["my"] = this.dataset["my"] == "yes" ? "no" : "yes";
for (j of mySpan) {
if (j.dataset["my"] == "yes") {
j.style.color = "#000000";
j.style.backgroundColor = "#ffff00";
}
else {
j.style.color = "#ffffff";
j.style.backgroundColor = "#000000";
}
}
sessionStorage["my"] = document.querySelector("#myDiv").innerHTML;
}
}
</script></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
로컬스토리지가 아니라 세션스토리지로 짜 보았습니다.
대충 만들었으니 참고하세요.
</p>
<p><style>
#myDiv { width:100%; max-width:600px; border:1px solid #888888; box-sizing:border-box; margin:0 auto; }
#myDiv div { width:calc(100%/3); padding:1px; background-color:#888888; box-sizing:border-box; float:left; }
#myDiv span { display:block; padding:15px; text-align:center; background-color:#000000; cursor:pointer; }
</style></p>
<p><div id="myDiv">
<div><span>01</span></div> <div><span>02</span></div> <div><span>03</span></div>
<div><span>04</span></div> <div><span>05</span></div> <div><span>06</span></div>
<div><span>07</span></div> <div><span>08</span></div> <div><span>09</span></div>
<div><span>10</span></div> <div><span>11</span></div> <div><span>12</span></div>
<div><span>13</span></div> <div><span>14</span></div> <div><span>15</span></div>
<div><span>16</span></div> <div><span>17</span></div> <div><span>18</span></div>
</div></p>
<p><script>
mySpan = document.querySelectorAll("#myDiv span");
for (i in mySpan) {
mySpan[i].num = i;
mySpan[i].onclick = function() {
sessionStorage["num"] = this.num;
for (j of mySpan) {
j.style.color = "#ffffff";
j.style.backgroundColor = "#000000";
}
mySpan[sessionStorage["num"]].style.color = "#000000";
mySpan[sessionStorage["num"]].style.backgroundColor = "#ffff00";
}
}
mySpan[typeof sessionStorage["num"] == "string" ? sessionStorage["num"] : "0"].onclick();
</script></p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인