悬停任何一个元素时，在元素数组上触发悬停事件

Question

我正在开发一个评分系统。 我必须突出显示所有星星，直到星星盘旋。 我的dom是这样的：

    <div class="star">
                 <i class="fa rating-star" ></i><!-- 
                 --><i class="fa rating-star" ></i>
                <i class="fa rating-star" ></i><!-- 
                 --><i class="fa rating-star" ></i>
                <i class="fa rating-star" ></i><!-- 
                 --><i class="fa rating-star" ></i>
                <i class="fa rating-star" ></i><!-- 
                 --><i class="fa rating-star" ></i>
                <i class="fa rating-star" ></i><!-- 
                 --><i class="fa rating-star" ></i>
     </div>

现在假设一个悬停在编号为8的恒星上，所以我必须突出显示所有恒星，直到第八颗恒星。 使用此CSS：

.rating-star{
cursor: pointer;
}
.rating-star:hover{
color: #ffcc00;
}

使用此js，但我收到最大调用堆栈大小超出错误。

    $(document).ready(function() {
    var halfStarArray = $('.star i');
    $('.star i').mouseover(function() {
        var index = $(this).index();
        for (var i = 0; i <= index; i++) {
            $(halfStarArray[i]).trigger('mouseenter');
        }
    });
});

Answer 1

尝试以下操作：您已绑定mouseover事件并显式触发mouseenter事件，这正在调用绑定事件并进入无限循环。 您可以发生一个hover事件，在此事件中您可以将悬停类添加到先前的元素中或从中删除。

 $(document).ready(function() { var halfStarArray = $('.star i'); $('.star i').hover(function() { var index = $(this).index(); //add class to all previous li elements using `lt` selector $('.star i:lt(' + index + ')').addClass('rating-star-hover'); $(this).addClass('rating-star-hover'); }, function() { var index = $(this).index(); //remove class from all previous li elements using `lt` selector $('.star i:lt(' + index + ')').removeClass('rating-star-hover'); $(this).removeClass('rating-star-hover'); }); }); 

 .rating-star{ cursor: pointer; } .rating-star-hover{ color: #ffcc00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="star"> <i class="fa rating-star" >11</i><i class="fa rating-star" > 22 </i> <i class="fa rating-star" >12</i><i class="fa rating-star" > 33 </i> <i class="fa rating-star" >13</i><i class="fa rating-star" > 44 </i> <i class="fa rating-star" >14</i><i class="fa rating-star" > 55 </i> <i class="fa rating-star" >15</i><i class="fa rating-star" > 66 </i> </div> 

Answer 2

尝试这个：

.rating-star {
            cursor: pointer;
        }

        .rating-star-hover {
            color: #ffcc00;
        }

 <div class="star">
        <i class="fa rating-star">0</i>
        <i class="fa rating-star">1</i>
        <i class="fa rating-star">2</i>
        <i class="fa rating-star">3</i>
        <i class="fa rating-star">4</i>
        <i class="fa rating-star">5</i>
        <i class="fa rating-star">6</i>
        <i class="fa rating-star">7</i>
        <i class="fa rating-star">8</i>
        <i class="fa rating-star">9</i>
    </div>

<script>
        $(document).ready(function () {

            var halfStarArray = $('.star i');

            $('.star i').mouseover(function () {
                var found = false;
                for (var i = 0; i <= halfStarArray.length; i++) {
                    if (found)
                        break;
                    else {
                        $(halfStarArray[i]).addClass('rating-star-hover');
                        if (halfStarArray[i] === this)
                            found = true;
                    }
                }
            });
            $('.star i').mouseout(function () {
                halfStarArray.removeClass('rating-star-hover');
            });

        });
    </script>