css, jquery 별점 구현 오류질문

css, jquery 별점 구현 오류질문

QA

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>

소스도 없고 위 사이트로 들어가도 호스팅 셋팅 페이지 밖에 안보이네요. 

제 생각엔 별점을 클릭했을때 별점을 체크한 이후 발생하는 스크립트 오류로 인해 

추가적으로 클릭 해서 별점을 바꾸더라도 이미 발생한 오류때문에 작동하지 않는것 같네요. 

 

개발자 도구 > 콘솔에서 로그 확인해 보면 쉽게 해결할수 있을것 같습니다. 

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT