jquery 별점 체크

jquery 별점 체크

모바일에서만 작동함.

HTML

<div id="complete_wrap">

<h2 class="complete_title">

<img src="../image/star/star_title.jpg" alt="2018 상반기 BEST콘텐츠 콘테스트" />

</h2>

<div class="inner">

<div class="star_area">

<div class="rating_box">

<div class="center">

<h3>

<img src="../image/star/rating_title.png" alt="라이프스타일 맞춤 콘텐츠가 당신에게 유용했나요? 별점으로 평가하고 이벤트에 응모하세요!" />

</h3>

<ul class="star_list">

<li>

<img src="../image/star/star_img_off.png" alt="별 회색" class="off" />

<img src="../image/star/star_img_on.png" alt="별 회색" class="on" />

</li>

<li>

<img src="../image/star/star_img_off.png" alt="별 회색" class="off" />

<img src="../image/star/star_img_on.png" alt="별 회색" class="on" />

</li>

<li>

<img src="../image/star/star_img_off.png" alt="별 회색" class="off" />

<img src="../image/star/star_img_on.png" alt="별 회색" class="on" />

</li>

<li>

<img src="../image/star/star_img_off.png" alt="별 회색" class="off" />

<img src="../image/star/star_img_on.png" alt="별 회색" class="on" />

</li>

<li>

<img src="../image/star/star_img_off.png" alt="별 회색" class="off" />

<img src="../image/star/star_img_on.png" alt="별 회색" class="on" />

</li>

</ul>

</div>

<img src="../image/star/rating_box_bg.jpg" alt="배경 이미지" />

</div>

<a href="javascript:;" class="btn_entry">

<img src="../image/star/btn_entry.png" alt="응모하기" />

</a>

</div>

</div>  

</div>

CSS

#complete_wrap img{ width:100%; }

#complete_wrap .complete_title{ font-size:0; }

#complete_wrap .inner{ background:url( ../image/star/complete_bg.jpg ) 0 0 repeat-y; background-size:contain; }

#complete_wrap .inner .star_area{ padding-bottom:20.3%;}

#complete_wrap .inner .star_area .rating_box{ position: relative; width:75.55555555555556%; margin:0 auto; font-size:0;}

#complete_wrap .inner .star_area .rating_box .center{ position: absolute; top:0; left:50%; width:100%; transform: translateX(-50%); }

#complete_wrap .inner .star_area .rating_box .center h3{ width:69.66911764705882%; margin:0 auto; padding-top:11%;}

#complete_wrap .inner .star_area .rating_box .center .star_list{ width:74.81617647058824%; margin:0 auto; padding-top:8.4%;}

#complete_wrap .inner .star_area .rating_box .center .star_list li{ float: left; position: relative; width:18.09041769041769%; margin-left:2.38002457002457%; padding-bottom:1%;}

#complete_wrap .inner .star_area .rating_box .center .star_list li:first-child{ margin-left:0;}

#complete_wrap .inner .star_area .rating_box .center .star_list li img{ position: absolute; top:0; left:0;}

#complete_wrap .inner .star_area .rating_box .center .star_list li img.on{ opacity: 0;}

#complete_wrap .inner .star_area .rating_box .center .star_list li.on img.on{ opacity: 1;}

#complete_wrap .inner .star_area .rating_box .center .star_list li.on img.off{ opacity: 0;}

#complete_wrap .inner .rating_box .center .star_list:after{ content: ''; display:block; clear: both;}

#complete_wrap .inner .btn_entry{ display:block; width:75.55555555555556%; margin:0 auto;}

SCRIPT

function addEvent()

{

_starTarget.on( "click", starTargetClick );

_starTarget.on( "touchmove", move );

}

function move( $e )

{

var sW = _starTarget.eq( 0 ).outerWidth( true );

var mX = $e.originalEvent.targetTouches[ 0 ].pageX - _starList.offset().left;

var index = Math.floor( mX / sW );

show( index );

}

function starTargetClick( $e )

{

var index = $( this ).index();

show( index );

}

function show( $len )

{

_starTarget.removeClass( "on" );

var i = 0;

var len = $len;

for( i; i<=len; i++ )

{

_starTarget.eq( i ).addClass( "on" );

}

}

예제 샘플

http://ux.adqua.co.kr/ux/ixkfo86/test/star/test/star_test.html