그누보드 QA - css, jquery 별점 구현 오류질문

css, jquery 별점 구현 오류질문

EY 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2022.05.30 11:38:24 2080 (220.♡.♡.113)

답변 2

본문

http://young.dothome.co.kr/test/test.html

modal에서 별점을 누르면 album_star도 바뀌도록 작업하였는데

5개 중 하나의 별점을 설정하면 나머지 4개의 album_star이 설정된 값 이상으로 바뀌질 않습니다

(3점 주면 모달 밖의 별점이 3이상의 클래스를 갖지못합니다)

어디서 잘못된건지 모르겠습니다ㅠㅠ

고수님들의 도움 받고자 질문 드립니다

미리 감사드립니다...

#css #jquery

답변 2

비타주리 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2022-05-30 13:43:22 1.♡.♡.41

제이쿼리는 제가 사용하지를 않는지라...

그냥 대충 바닐라로 짜 보았습니다.

1. css 는 알아서 더 보태주세요.

2. 모달레이어의 포지션은 하단 플로팅 형태의 fixed 로 하였는데 absolute 로 바꿔 사용해도 됩니다.

경우에 따라서는 z-index 를 첨가하시구요.

3. 0을 쓰고 싶지 않으면 그 부분을 지워버리고 for 문은 1부터 돌려주세요.


<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>
 
<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>
 
<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>