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

我正在研究评级系统。我必须高亮显示所有的星星，直到星星在上面盘旋。 我的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>

使用这个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');
        }
    });
});

$（文档）.ready（函数（）{
var halfStarArray=$（'.stari'）；
$（'.star i'）.mouseover（函数（）{
var index=$（this.index（）；
对于（var i=0；i试试这个：您已经绑定了mouseover事件并明确地触发了mouseenter事件，它正在调用绑定的事件并进入无限循环。
您可以有一个
hover
事件，在该事件中将您的悬停类添加和删除到前面的元素中


$（文档）.ready（函数（）{
var halfStarArray=$（'.stari'）；
$（'.star i'）.hover（函数（）{
var index=$（this.index（）；
//使用'lt'选择器将类添加到所有以前的li元素
$（'.star i:lt（'+index+'））.addClass（'rating-star-hover'）；
$（this.addClass（'rating-star-hover'）；
}，函数（）{
var index=$（this.index（）；
//使用'lt'选择器从所有以前的li元素中删除类
$（'.star i:lt（'+index+'））.removeClass（'rating-star-hover'）；
$（this.removeClass（'rating-star-hover'）；
});
})；
.rating star{
光标：指针；
}
.星星悬停{
颜色：#ffcc00；
}

11 22 
12 33 
13 44 
14 55 
15 66 
试试这个：您已经绑定了mouseover事件，并明确地触发了mouseenter事件，这将调用绑定的事件并进入无限循环。
您可以有一个
hover
事件，在该事件中将您的悬停类添加和删除到前面的元素中


$（文档）.ready（函数（）{
var halfStarArray=$（'.stari'）；
$（'.star i'）.hover（函数（）{
var index=$（this.index（）；
//使用'lt'选择器将类添加到所有以前的li元素
$（'.star i:lt（'+index+'））.addClass（'rating-star-hover'）；
$（this.addClass（'rating-star-hover'）；
}，函数（）{
var index=$（this.index（）；
//使用'lt'选择器从所有以前的li元素中删除类
$（'.star i:lt（'+index+'））.removeClass（'rating-star-hover'）；
$（this.removeClass（'rating-star-hover'）；
});
})；
.rating star{
光标：指针；
}
.星星悬停{
颜色：#ffcc00；
}

11 22 
12 33 
13 44 
14 55 
15 66 
试试这个：

.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>

.rating star{
光标：指针；
}
.星星悬停{
颜色：#ffcc00；
}
0
1.
2.
3.
4.
5.
6.
7.
8.
9
$（文档）.ready（函数（）{
var halfStarArray=$（'.stari'）；
$（'.star i'）.mouseover（函数（）{
var=false；
对于（var i=0；i尝试以下方法：

.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>

.rating star{
光标：指针；
}
.星星悬停{
颜色：#ffcc00；
}
0
1.
2.
3.
4.
5.
6.
7.
8.
9
$（文档）.ready（函数（）{
var halfStarArray=$（'.stari'）；
$（'.star i'）.mouseover（函数（）{
var=false；
对于（var i=0；我感谢@Bhushan Kawadkar为我提供了这一见解。我有点好奇，并使用性能测量了时间间隔。现在（）您的方法比我使用的数组方法快。很高兴帮助您：），在这里，我们不必迭代所有元素，因此速度更快。如果觉得有用，您可以投票并接受答案。感谢@Bhushan Kawadkar为我提供了这一见解。我有点好奇，并使用性能测量了时间间隔。现在（）您的方法比我使用的数组方法快。很高兴帮助您：），在这里，我们不必遍历所有元素，因此速度更快。如果发现答案有用，您可以向上投票并接受答案。