Question

我获得了第一个星级评级并且正在运行，但是，我错过了单个部分。我的HTML看起来像这样：

<div class="rating">
  <a class="star-link" href="/vote?hack=3&amp;rating=1">
    <span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="1" id="3-star-1"></span>
  </a>
  <a class="star-link" href="/vote?hack=3&amp;rating=2">
    <span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="2" id="3-star-2"></span>
  </a>
  <a class="star-link" href="/vote?hack=3&amp;rating=3">
    <span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="3" id="3-star-3"></span>
  </a>
  <a class="star-link" href="/vote?hack=3&amp;rating=4">
    <span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="4" id="3-star-4"></span>
  </a>
  <a class="star-link" href="/vote?hack=3&amp;rating=5">
    <span class="glyphicon glyphicon-star-empty star inline" data-hack="3" data-rating="5" id="3-star-5"></span>
  </a>
</div>

这是我的Javascript：

javascript:
  $('span.star').hover(function() {
    hack_id = this.dataset.hack;
    rating = this.dataset.rating;

    for (i = 1; i <= 5; i++) {
      if (i <= rating) {
        $('#' + hack_id + '-star-' + i).addClass('star-active');
      } else {
        $('#' + hack_id + '-star-' + i).removeClass('star-active');
      }
    }
  });

现在，当我将鼠标悬停在星星上时，它会很好地应用该类，并且还会移除那些不需要的星级。我的最后一个问题是，一旦应用了类，我将鼠标移动到其他地方，它就不会撤消更改。我非常需要某种形式：

if (not hovering over any star)
   remove all classes set before
endif

我知道这是一项非常基本的任务，但我似乎无法通过它。提前谢谢大家！

Answer 1

你可以使用jquery的mouseout（）：http://api.jquery.com/mouseout/

另外，不是使用jquery来应用类，而是可以在css中定义

.star-active:hover{
/*whatever you have in .start-active now*/
}

然后你不需要任何jquery / js这个

当＆＃34; unhovering＆＃34;重置课程项目

1 个答案: