单击时替换 Font Awesome 5 图标的 jQuery 问题？答案

【问题标题】：jQuery issue with replacing Font Awesome 5 icon on click?单击时替换 Font Awesome 5 图标的 jQuery 问题？
【发布时间】：2018-02-25 21:10:34
【问题描述】：

我正在尝试使用 Font Awesome 5 将播放按钮更改为暂停按钮。我不明白为什么它似乎只是没有在点击时切换。它可以识别点击（我尝试使用警报，所以当我按下按钮本身时它会识别）但它只是找不到里面的元素并更改它。

这是我的代码：

$(".startButton").click(function() {
  $(this).find("i").removeClass("fa-play-circle").addClass("fa-pause-circle")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>

<div id="timerWrapper">
  <div class="valuesWrapper">
    <div class="values"> 00:00:00</div>
  </div>
  <div id="buttonWrapper">
    <button class="startButton"><i class="fas fa-play-circle"></i></button>
    <button class="stopButton">Stop</button>
    <button class="clearButton">Clear</button>
  </div>
</div>

【问题讨论】：

对我来说很好用
我制作了这个 JSfiddle 并尝试修改以使其在类是播放按钮并且似乎不起作用时显示警报？ jsfiddle.net/62aetgtj/3
啊，这改变了一切 :) 您正在使用 FA 5 删除 i 以使其成为 svg ;) 指定这一点非常重要！除非你的问题完全不相关
对不起！！我是新手。我看到其他人提到了 svg，我尝试将“i”修改为“svg”，但仍然没有解决我的问题。我只是不确定我在这里做错了什么
修改你的问题以包括相关部分；）我要添加一个答案

标签： javascript jquery font-awesome font-awesome-5

【解决方案1】：

您的代码的主要问题是您使用的 Font Awesome 5 将 i 元素更改为 svg，因此您的代码将无法工作。

你有两个解决方案：

最简单的方法是使用 Font Awesome 5 的 CSS 版本，您将能够保持代码原样：

$(".startButton").click(function() {
  $(this).find("i").removeClass("fa-play-circle").addClass("fa-pause-circle");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet">
<div id="timerWrapper">
  <div class="valuesWrapper">
    <div class="values"> 00:00:00</div>
  </div>
  <div id="buttonWrapper">
    <button class="startButton"><i class="fas fa-play-circle"></i></button>
    <button class="stopButton">Stop</button>
    <button class="clearButton">Clear</button>
  </div>
</div>

另一种解决方案是更改代码以处理 SVG。因此，您可以使用所需的图标更改生成的 svg 的 data-icon 属性：

$(".startButton").on('click',function() {
  $(this).find('svg').attr("data-icon",'pause-circle');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
<div id="timerWrapper">
  <div class="valuesWrapper">
    <div class="values"> 00:00:00</div>
  </div>
  <div id="buttonWrapper">
    <button class="startButton"><i class="fas fa-play-circle"></i></button>
    <button class="stopButton">Stop</button>
    <button class="clearButton">Clear</button>
  </div>
</div>

【讨论】：