여러개의 버튼 선택 후 상태 유지. 도와주세요 ㅜㅜ 채택완료
위 이미지와 같이 여려개의 버튼을 선택하면 선택한 버튼만 색상이 변하는데요, 새로고침해도 색상을
유지할 수 있게끔 localstorage 로 만들어 보려구 하는데 잘 안됩니다.
Copy
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개
채택된 답변
+20 포인트
2년 전
이리 코드를 짜면 안 되구요.
땡기는 코드라 있다 집에 가서 짜 드릴게요.
2시간만 기들리셈
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
2년 전
에고 내가 완전히 문제를 잘못 독해했네요.
처음부터 건드리지를 말았어야 하는 건데... 여튼 코드 다 짜 놓고 자러 갑니다.
Copy
#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; }
01 02 03
04 05 06
07 08 09
10 11 12
13 14 15
16 17 18
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;
}
}
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
2년 전
로컬스토리지가 아니라 세션스토리지로 짜 보았습니다.
대충 만들었으니 참고하세요.
Copy
#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; }
01 02 03
04 05 06
07 08 09
10 11 12
13 14 15
16 17 18
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();
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
비버팩토리2년 전
document.querySelectorAll(".btnChk"); 이거 셀렉터가 잘못된거 같아요 버튼 내부에 div 감싼거 있으면 그걸 위주로 해서
반복문으로 접근해야되요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인