Jquery Fontawesome Pro 悬停后的属性更改仅有效一次

Question

尝试使用 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','fal').attr('data-prefix','fas');
    });
});

Answer 1

使用 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>

并定位 span

内的 svg

$("#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');
});

Jquery Fontawesome Pro 悬停后的属性更改仅有效一次

Jquery attribute change after hover of Fontawesome Pro only work once

jquery

font-awesome-5