Question

我正在创建一个星级评分系统。当我鼠标悬停在第五颗星上时，想要添加课程“活跃”。对于所有以前的星星，如果我将鼠标悬停在具有类.star-span的任何其他元素上，则会有一些。

要素：

<label class="star-span" for="rate-one"></label>
<label class="star-span" for="rate-two"></label>
<label class="star-span" for="rate-three"></label>
<label class="star-span" for="rate-four"></label>
<label class="star-span" for="rate-five"></label>

到目前为止我的Jquery代码：

$('.star-span').mouseenter(function()
{
    $('.star-span').prevAll('.star-span').addClass('active');
})    
$('.star-span').mouseleave(function()
{
    $('.star-span').prevAll('.star-span').removeClass('active');
});

现在当我将鼠标悬停在任何元素上时。前4个跨度将获得该课程。不是我徘徊的元素的主要元素。

我如何解决这个问题？

Answer 1

您必须使用下面的this。 this是发生mouseenter或mouseleave事件的当前元素的实例

$('.star-span').mouseenter(function()
{
    $(this).prevAll('.star-span').addClass('active');
})    
$('.star-span').mouseleave(function()
{
    $(this).prevAll('.star-span').removeClass('active');
});

Answer 2

在事件处理程序中，您需要使用它来引用当前的星号

$('.star-span').mouseenter(function()
{
    $(this).prevAll('.star-span').addClass('active');
})    
$(this).mouseleave(function()
{
    $('.star-span').prevAll('.star-span').removeClass('active');
});

Answer 3

此活动也可以根据您的要求正常运作。

$('.star-span').mouseover(function(){
  $(this).prevAll('.star-span').addClass('active');
}).mouseout(function(){
  $(this).prevAll('.star-span').removeClass('active');
});

jquery prevAll（）在同一个类上

3 个答案: