css, jquery 별점 구현 오류질문 채택완료
EY
3년 전
조회 2,657
http://young.dothome.co.kr/test/test.html
modal에서 별점을 누르면 album_star도 바뀌도록 작업하였는데
5개 중 하나의 별점을 설정하면 나머지 4개의 album_star이 설정된 값 이상으로 바뀌질 않습니다
(3점 주면 모달 밖의 별점이 3이상의 클래스를 갖지못합니다)
어디서 잘못된건지 모르겠습니다ㅠㅠ
고수님들의 도움 받고자 질문 드립니다
미리 감사드립니다...
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
3년 전
제이쿼리는 제가 사용하지를 않는지라...
그냥 대충 바닐라로 짜 보았습니다.
1. css 는 알아서 더 보태주세요.
2. 모달레이어의 포지션은 하단 플로팅 형태의 fixed 로 하였는데 absolute 로 바꿔 사용해도 됩니다.
경우에 따라서는 z-index 를 첨가하시구요.
3. 0을 쓰고 싶지 않으면 그 부분을 지워버리고 for 문은 1부터 돌려주세요.
</p>
<p><div><span id=star_0>☆☆☆☆☆</span> <button id=btn_0>OPEN</button></div>
<div><span id=star_1>★☆☆☆☆</span> <button id=btn_1>OPEN</button></div>
<div><span id=star_2>★★☆☆☆</span> <button id=btn_2>OPEN</button></div>
<div><span id=star_3>★★★☆☆</span> <button id=btn_3>OPEN</button></div>
<div><span id=star_4>★★★★☆</span> <button id=btn_4>OPEN</button></div>
<div><span id=star_5>★★★★★</span> <button id=btn_5>OPEN</button></div></p>
<p> </p>
<p><div id=modalDiv style=position:fixed;bottom:20px;left:20px;display:none>
<span id=starNumber></span>
<button onclick=modalDiv.style.display='none'>CLOSE</button>
<span id=starSpan style=font-size:30px></span>
</div></p>
<p> </p>
<p><script>
for (i = 0; i <= 5; i++) {
this["btn_" + i].num = i;
this["btn_" + i].onclick = function() {
modalDiv.style.display = "block";
starNumber.innerText = this.num;
starSpan.innerHTML = window["star_" + this.num].innerHTML;
}
}
</script></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
E
EY
3년 전
확실히 코드가 깔끔해지네요ㅠㅠ 짧은 코드에 궁금했던 내용들이 다 들어가있어서 응용해서 사용할 수 있을 것 같습니다! 감사합니다~!!!
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인