在jQuery中使用变量addClass（）

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

的HTML看起来像这样：

<span class="icon-rating-empty" id="blob1"></span>

等了斑点2-5。

我目前拥有的JS是

var blob1 = document.getElementById('blob1');  
var blob2 = document.getElementById('blob2');  
var blob3 = document.getElementById('blob3');  
var blob4 = document.getElementById('blob4');  
var blob5 = document.getElementById('blob5');  
var rating = 0;  
blob1.addEventListener('hover', function() {  
    $(blob1).addClass("icon-rating-full").addClass("green-blob").removeClass("icon-rating-empty")  
},  
function() {  
    $(blob1).addClass("icon-rating-empty").removeClass("green-blob").removeClass("icon-rating-full")  
});  
blob1.addEventListener('click', function() {  
    rating = 1;  
});

这不工作，我敢肯定，我不知道如何处理与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/

回答：

未经测试：

<span class="rating"> 
<span data-star="0">STAR</span> 
<span data-star="1">STAR</span> 
<span data-star="2">STAR</span> 
<span data-star="3">STAR</span> 
<span data-star="4">STAR</span> 
<span data-star="5">STAR</span> 
</span> 
<script> 
try{ 
var elements = document.querySelectorAll('.rating'), 
    listener = function(e){ 
     var a = this, parent = a.parentNode, value = parseInt(a.getAttribute('data-star')); 
     // reset 
     parent.classList = 'rating'; 
     // add class 
     parent.classList.add('star-'+value); 
    }; 
// get all elements and attach listener 
for(var i = 0; i < elements.length; ++i){ 
    var current = elements[i], childs = current.children; 
    for(var ii = 0; ii < childs.length; ++ii){ 
     childs[ii].addEventlistener('mouseenter',listener,false); 
    } 
} 
} catch(e){ console.log('error',e); } 
</script>

如果有什么不工作只是到这里报到。

以上是 在jQuery中使用变量addClass（） 的全部内容， 来源链接： utcz.com/qa/261753.html

回到顶部