Fontawesome Pro 悬停后的 Jquery 属性更改只工作一次答案

【问题标题】：Jquery attribute change after hover of Fontawesome Pro only work onceFontawesome Pro 悬停后的 Jquery 属性更改只工作一次
【发布时间】：2020-09-03 12:07:16
【问题描述】：

尝试使用 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');
    });
});

【问题讨论】：

当图标应该用#ratings i选择时，你似乎选择了#ratings svg
你能把你的代码添加到sn-p中吗

标签： jquery font-awesome-5

【解决方案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');
});

【讨论】：