Question

我是JS和jQuery的新手，但我一直在尝试将addClass()和removeClass与一些Javascript变量一起使用，并且不知道我做错了什么。

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

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

HTML看起来像这样：

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

对于blob 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)，则可以使用，但我想使用变量，因为我的计划更多。

Answer 1

你离我不远。您需要设置两组事件监听器：一组用于用户点击星号时，另一组用于用户悬停在星号上时。

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

悬停增加了一层复杂性。每次有鼠标悬停时，您都需要循环遍历星形元素并更新类，就好像这是新的评级。当您使用鼠标时，您将根据您保存的评级再次更新课程。

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/

Answer 2

未测试：

<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（）

2 个答案: