css, jquery 별점 구현 오류질문
본문
http://young.dothome.co.kr/test/test.html
modal에서 별점을 누르면 album_star도 바뀌도록 작업하였는데
5개 중 하나의 별점을 설정하면 나머지 4개의 album_star이 설정된 값 이상으로 바뀌질 않습니다
(3점 주면 모달 밖의 별점이 3이상의 클래스를 갖지못합니다)
어디서 잘못된건지 모르겠습니다ㅠㅠ
고수님들의 도움 받고자 질문 드립니다
미리 감사드립니다...
답변 2
제이쿼리는 제가 사용하지를 않는지라...
그냥 대충 바닐라로 짜 보았습니다.
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>
확실히 코드가 깔끔해지네요ㅠㅠ 짧은 코드에 궁금했던 내용들이 다 들어가있어서 응용해서 사용할 수 있을 것 같습니다! 감사합니다~!!!
소스도 없고 위 사이트로 들어가도 호스팅 셋팅 페이지 밖에 안보이네요.
제 생각엔 별점을 클릭했을때 별점을 체크한 이후 발생하는 스크립트 오류로 인해
추가적으로 클릭 해서 별점을 바꾸더라도 이미 발생한 오류때문에 작동하지 않는것 같네요.
개발자 도구 > 콘솔에서 로그 확인해 보면 쉽게 해결할수 있을것 같습니다.
답변을 작성하시기 전에 로그인 해주세요.
