Javascript Jquery将类添加到所有以前的同级

我正在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>

我想根据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');

---

有什么办法可以解决吗？

如果在控制台中运行它有效…您是否将jQuery包装在$document.readyfunction{…}中？@Tricky12是的，我只是引用它来提高代码的可读性，但它确实存在。我确实在控制台中收到ajax响应，但无法添加或删除类。我认为您可能不需要在语句中添加回。除此之外，我不确定是什么导致了这个问题。我在JSFIDLE中很幸运-这正是我混淆它是否工作的原因，但在我的情况下，您可以尝试使用console.logINFO作为成功的第一行：functionINFO，以确保它包含您认为它的功能。如果信息是正确的，从我所能说的，其他一切看起来都应该是有效的。

  $("div[data-rating = '" + INFO + "']").prevAll().addBack().addClass('ratings_vote');
     $('.rate_widget').find('[data-rating="' + INFO + '"]').prevAll().andSelf().addClass('ratings_vote');