我正在使用WordPress中的简单评级系统。
<div id="r1" class="rate_widget"
data-post-id="<?php echo $post_id ?>"
data-user-id="<?php echo $user_id; ?>"
data-nonce="<?php echo $nonce ?>"
>
<div data-rating="1" class="ratings_stars"></div>
<div data-rating="2" class="ratings_stars"></div>
<div data-rating="3" class="ratings_stars"></div>
<div data-rating="4" class="ratings_stars"></div>
<div data-rating="5" class="ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
我有三个班级
1-rating_stars = simply to show star.png
2- ratings_vote = when user hover over stars it turns into yellow
3- ratings_done = After receiving a response star turn into blue.
我想根据Ajax收到的数字添加或删除类。
以下是代码:
$('.ratings_stars').hover(
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
}
);
// This actually records the vote
$('.ratings_stars').bind('click', function() {
var star = this;
var widget = $(this).parent();
var clicked_data = {
clicked_on : $(star).attr('data-rating'),
widget_id : $(star).parent().attr('id'),
post_id:$(star).parent().attr('data-post-id') ,
user_id:$(star).parent().attr('data-user-id') ,
nonce: $(star).parent().attr('data-nonce'),
action: 'rating_system'
};
console.log(clicked_data);
$.ajax({
type: 'POST',
data: clicked_data,
url : myAjax.ajaxurl,
success: function(INFO) {
$("div[data-rating = '" + INFO + "']").prevAll().addBack().addClass('ratings_vote');
$('.rate_widget').find('[data-rating="' + INFO + '"]').prevAll().andSelf().addClass('ratings_vote');
$('.rate_widget').find('[data-rating="' + INFO + '"]').nextAll().removeClass('ratings_vote');
}
});
});
我已尝试过这些最后一行,但它不起作用。但我在控制台中运行相同的代码,它完美无缺。 INFO是1到5之间的数字。
$("div[data-rating = '" + INFO + "']").prevAll().addBack().addClass('ratings_vote');
$('.rate_widget').find('[data-rating="' + INFO + '"]').prevAll().andSelf().addClass('ratings_vote');
有什么方法可以解决吗?