<分区>
我已经为评级系统创建了一个小代码,并且在我的表单中使用了 font awesome star。当我点击它时它不能正常工作。我想让评级系统在我点击它时正常工作。
这是我正在使用的代码:
jQuery(document).ready(function ($) {
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).next('i').slideToggle('500');
$(this).find('i').toggleClass('fa-star fa-star-o');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
$(this).next('i').slideToggle('500');
$(this).find('i').toggleClass('fa-star fa-star-o');
}
);
function set_votes(widget) {
jQuery('.star_' + widget).prevAll().andSelf().addClass('ratings_vote');
}
$('.ratings_stars').bind('click', function() {
var star = this;
$(star).prevAll().removeClass('ratings_over');
$(star).prevAll().andSelf().addClass('ratings_over');
$(this).next('i').slideToggle('500');
$(this).find('i').toggleClass('fa-star fa-star-o');
$(star).nextAll().removeClass('ratings_vote');
$('#client_ratings').val( jQuery(star).attr('data-id') );
var data_id =jQuery(star).attr('data-id');
jQuery('.star_' + data_id).prevAll().andSelf().addClass('ratings_vote');
});
jQuery('.rate_widgett').each(function(i) {
$(this).nextAll().removeClass('ratings_vote');
$(this).prevAll().removeClass('ratings_vote');
var data_count = $(this).attr('data-id');
$(this).find('.star_' + data_count).prevAll().andSelf().addClass('ratings_vote');
});
});
.ratings_choice {
overflow: visible;
padding: 10px;
position: relative;
width: 180px;
height: 32px;
}
.ratings_stars {
float: left;
padding: 2px;
}
.ratings_vote {
color: green;
}
.ratings_choice {
font: 10px verdana, sans-serif;
margin: 0 auto 40px auto;
width: 180px;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iva_ratings_choice">
<div id="r1" class="ratings_choice">
<a class="star_1 ratings_stars" data-id="1"><i class="fa fa-star-o fa-3x"></i></a>
<a class="star_2 ratings_stars" data-id="2"><i class="fa fa-star-o fa-3x"></i></a>
<a class="star_3 ratings_stars" data-id="3"><i class="fa fa-star-o fa-3x"></i></a>
<a class="star_4 ratings_stars" data-id="4"><i class="fa fa-star-o fa-3x"></i></a>
<a class="star_5 ratings_stars" data-id="5"><i class="fa fa-star-o fa-3x"></i></a>
</div></div>
<input type="hidden" name="client_ratings" id="client_ratings">