悬停Fontawesome Pro后的jQuery属性更改仅起作用一次

问题描述

尝试使用Fontawesome Pro在悬停时创建简单的评分系统。基本上，当悬停时，所有先前的图标上都应显示实心星星，而接下来的所有图标上应均亮起。

<div id="ratings" class="panel-body">
  <h1>ratings</h1>
  <i class="fal fa-star fa-2x" aria-hidden="true"></i>
  <i class="fal fa-star fa-2x" aria-hidden="true"></i>
  <i class="fal fa-star fa-2x" aria-hidden="true"></i>
  <i class="fal fa-star fa-2x" aria-hidden="true"></i>
  <i class="fal fa-star fa-2x" aria-hidden="true"></i>
</div>

jquery是：

$(document).ready(function() {
    $("#ratings svg").hover(function() {
      var $this = $(this);
      $this.nextAll().attr('data-prefix','fal');
      $this.prevUntil("h1").attr('data-prefix','fas');
      $this.attr('data-prefix','fas');
    });
});

它只能运行一次，并在第一次更改后立即停止。还尝试过删除attr，但还是没有运气。

$(document).ready(function() {
    $("#ratings svg").hover(function() {
      var $this = $(this);
      $this.nextAll().removeAttr('data-prefix','fas').attr('data-prefix','fal');
      $this.prevUntil("h1").removeAttr('data-prefix','fal').attr('data-prefix','fas');
      $this.removeAttr('data-prefix','fas');
    });
});

解决方法

使用Fontawesome Pro，您必须将<i>放在span内

<div id="ratings" class="panel-body">
  <h1>Ratings</h1>
  <span><i class="fal fa-star fa-2x" aria-hidden="true"></i></span>
  <span><i class="fal fa-star fa-2x" aria-hidden="true"></i></span>
  <span><i class="fal fa-star fa-2x" aria-hidden="true"></i></span>
  <span><i class="fal fa-star fa-2x" aria-hidden="true"></i></span>
  <span><i class="fal fa-star fa-2x" aria-hidden="true"></i></span>
</div>

并在svg内定位span

$("#ratings span").hover(function () {
    var $this = $(this);
    $this.nextAll().find('svg').attr('data-prefix','fal');
    $this.prevUntil("h1").find('svg').attr('data-prefix','fas');
    $this.find('svg').attr('data-prefix','fas');
});