Question

我有一个如下定义的星级评分系统：

<span class="rating_container"> 
    <span class="star_container">  
        <a rel="nofollow" href="" class="star star_1" >1<span class="rating">Terrible</span></a>   
        <a rel="nofollow" href="" class="star star_2" >2<span class="rating">Bad</span></a>
        <a rel="nofollow" href="" class="star star_3" >3<span class="rating">Bad</span></a>
        <a rel="nofollow" href="" class="star star_4" >4<span class="rating">OK</span></a>   
        <a rel="nofollow" href="" class="star star_5" >5<span class="rating">OK</span></a>   
        <a rel="nofollow" href="" class="star star_6" >6<span class="rating">OK</span></a>   
        <a rel="nofollow" href="" class="star star_7" >7<span class="rating">Good</span></a>   
        <a rel="nofollow" href="" class="star star_8" >8<span class="rating">Good</span></a>   
        <a rel="nofollow" href="" class="star star_9" >9<span class="rating">Excellent</span></a>   
        <a rel="nofollow" href="" class="star star_10" >10<span class="rating">Excellent</span></a>  
    </span> 
</span>

鼠标悬停发生时，每颗星都会着色。我如何用jquery模拟这个？例如，我想将鼠标移到第5星。这就是我尝试过的：

     $('.star.star_5').addClass('active');

我错过了什么？

Answer 1

尝试：

$(".star_5").trigger('mouseover');

这将触发鼠标悬停操作，而不是模拟它，提供针对鼠标悬停处理程序更改的未来验证措施。

Answer 2

我认为你需要的是

$('.star.star_5').addClass('active');

注意 .star与.star_5和_中的star_5之间的无空格。（谢谢@wirey）

Answer 3

在CSS（这是jQuery选择器所基于的）中，.class1 .class2表示“具有class2的元素，其具有带class1的祖先”。这不是你想要的。你想要.class1.class2，意思是“同时包含class1和class2的元素”：

$('.star.star_5').addClass('active');

Answer 4

如果您真的想要模拟事件：您可以使用相应jQuery函数的无参数形式触发JavaScript事件。例如：

$('.star.star_5').mouseover();

如何使用jquery模拟mouseover事件？

4 个答案: