javascript - jQuery(this) 奇妙な伝搬バグ?

Question

一部の人々にとって、この質問は明確ではないようです。

望ましい効果:

マウスが上にある要素のクラスを削除します。

問題：

jQuery(this) を使用して要素を指している場合でも、クラスの削除は同じクラスのすべての要素に影響します。

私は次のhtmlを持っています:

<div id="stars_rater">
    <span class="wp-svg-star star rater" id = "rater_1"></span>
    <span class="wp-svg-star star rater" id = "rater_2"></span>
    <span class="wp-svg-star star rater" id = "rater_3"></span>
    <span class="wp-svg-star star rater" id = "rater_4"></span>
    <span class="wp-svg-star star rater" id = "rater_5"></span>
</div>

そして、このjQuery：

if(jQuery('#stars_rater').length > 0)
{   
    jQuery('.rater').on('mousemove', function(e)
    {
        var parentOffset = jQuery(this).offset(); 
        var relX = e.pageX - parentOffset.left;
        var number = Number(jQuery(this).attr('id').substring(6));
        var current_id = jQuery(this).attr('id');
        rating = 0;
        if(relX < (jQuery(this).width()/2))
        {
            rating = ((number-1)+0.5); 
//          jQuery(this).removeClass();
            jQuery(this).addClass('wp-svg-star-1');
            jQuery(this).addClass('star-1');
        }
    });
}

コメント行に到達するまで、すべてが正常に機能します。remove class とそれに続くアクションは、jQuery(this) に適用される代わりに、class .rater を持つすべての要素に適用されます。

この行を削除すると、スクリプトは期待どおりに機能します。

競合する行に関して私が試したこと:

jQuery('#rater_'number).removeClass('class','');
jQuery(this).attr('class','');

イベントを別の方法で添付するために試したこと

jQuery('#rater_1, #rater_2, #rater_3, #rater_4, #rater_5').on('mousemove', function(e)

このアクションのどれも問題を解決していません。