• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

在jQuery中使用变量addClass()

JavaScript 3次浏览

我是JS和jQuery的新手,但我一直试图对一些Javascript变量使用addClass()removeClass,并且不知道我在做什么错误。在jQuery中使用变量addClass()

我有这个1-5星评级系统。

我希望它在悬停时更改类,并在点击时保存评分。

的HTML看起来像这样:

等了斑点2-5。

我目前拥有的JS是

这不工作,我敢肯定,我不知道如何处理与jQuery的变量,但不能找到任何我应该做的事情。

我测试过了,如果我用$("#blob1")而不是$(blob1)它可以工作,但我想使用变量,因为我有更多的计划。


===========解决方案如下:

你并不遥远。您将需要设置两组事件监听器:一个用于用户单击某个星号时,另一个用于用户悬停在星号之上。

我建议将“评级”保存为一个变量。当用户点击明星时,您可以调整评分。我使用数据属性来跟踪每颗星的价值。调整评分后,您可以遍历元素并相应地添加或删除类。

悬停增加了一层复杂性。每次出现鼠标悬停时,您都需要遍历明星元素并更新类,就好像这是新评级一样。当你弹出鼠标时,你会根据你保存的评级再次更新班级。

var rating = 0; 
var stars = $('li'); 

// Set up listeners 
$('li').on('click', function(){ 
    rating = parseInt($(this).data('val')); 
    drawStars(rating); 
}); 

$('li').hover(
    function(){ 
    tempRating = parseInt($(this).data('val')); 
    drawStars(tempRating); 
    }, 
    function(){ 
    drawStars(rating); 
    } 
); 

// This function loops through the "star" elements and adds and removes a 'selected' class 
function drawStars(numStars){ 
    // Reset the colour by removing the selected class from all elements 
    for(var i = 0; i < stars.length; i++){ 
    $(stars[i]).removeClass('selected'); 
    } 
    // Add a selected class to some of the elements 
    for(var i = 0; i < numStars; i++){ 
    $(stars[i]).addClass('selected'); 
    } 
} 

看到这个的jsfiddle:https://jsfiddle.net/ffz5y9fm/5/


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)