여러개의 버튼 선택 후 상태 유지. 도와주세요 ㅜㅜ
본문
위 이미지와 같이 여려개의 버튼을 선택하면 선택한 버튼만 색상이 변하는데요, 새로고침해도 색상을
유지할 수 있게끔 localstorage 로 만들어 보려구 하는데 잘 안됩니다.
let ddd = document.querySelectorAll(".btnChk");
for(let i = 0; i < ddd.length; i++) {
$(ddd[i]).addClass("kk"+i);
ddd[i].addEventListener("click", function () {
$(this).toggleClass('active');
if ( $(this).hasClass("active") === true ) {
localStorage.setItem("add", "true");
} else {
localStorage.setItem("add", "false");
}
});
}
if (localStorage.getItem("add") === "true") {
$('.btnChk').addClass("active");
}else {
$('.btnChk').removeClass("active");
}
답변 4
이리 코드를 짜면 안 되구요.
땡기는 코드라 있다 집에 가서 짜 드릴게요.
2시간만 기들리셈
로컬스토리지가 아니라 세션스토리지로 짜 보았습니다.
대충 만들었으니 참고하세요.
<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>
<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>
<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>
버튼 하나는 유지가 되는데 다른 여러 버튼들도 같이 유지되려면 어케 해야할까요? 도움에 감사드립니다.
에고 내가 완전히 문제를 잘못 독해했네요.
처음부터 건드리지를 말았어야 하는 건데... 여튼 코드 다 짜 놓고 자러 갑니다.
<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>
<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>
document.querySelectorAll(".btnChk"); 이거 셀렉터가 잘못된거 같아요 버튼 내부에 div 감싼거 있으면 그걸 위주로 해서
반복문으로 접근해야되요
답변을 작성하시기 전에 로그인 해주세요.
