[자바스크립트] 별점 제이쿼리

@extends('layouts/master')

@section('style')
<style>
.starR{
background: url('http://miuu227.godohosting.com/images/icon/ico_review.png') no-repeat right 0;
background-size: auto 100%;
width: 30px;
height: 30px;
display: inline-block;
text-indent: -9999px;
cursor: pointer;
}
.starR.on{background-position:0 0;}

</style>

@endsection

@section('content')
<p>content section</p>
<div class="starRev">
<span class="starR on" data-value="1">★</span>
<span class="starR" data-value="2">★</span>
<span class="starR" data-value="3">★</span>
<span class="starR" data-value="4">★</span>
<span class="starR" data-value="5">★</span>
</div>

@endsection

@section('script')
<script>
$('.starRev span').click(function(){
var obj = $(this);
obj.parent().children("span").removeClass("on");
obj.addClass("on").prevAll("span").addClass("on");
console.log(obj.attr('data-value'));

});

</script>

@endsection