jQuery 移除 Font Awesome 图标答案

【问题标题】：jQuery removes Font Awesome IconjQuery 移除 Font Awesome 图标
【发布时间】：2016-03-07 18:12:23
【问题描述】：

我在实验中使用Font Awesome和jQuery，动画后，jQuery将列表中的加载图标替换为勾号，文本也发生了变化。但是，当我删除 jQuery replaceWith 方法时，图标仍然存在：

HTML：

<ul class="fa-ul">
        <li><i class="fa-li fa fa-spinner fa-spin" id = "ToDo1"></i>Downloading</li>
        <li><i class="fa-li fa fa-square" id = "ToDo2"></i>text</li>
        <li><i class="fa-li fa fa-square" id = "ToDo3"></i>text</li>
        <li><i class="fa-li fa fa-square" id = "ToDo4"></i>text</li>
</ul>

jQuery:

setTimeout(function() {
    $("#ToDo1").removeClass("fa-spin fa-spinner");
    $("#ToDo1").addClass("fa-check-square");
    $("li:first").replaceWith("Download Complete");
    $("#ToDo2").addClass("fa-spin fa-spinner");
}, 2000);

结果：

之前：

在jQuery之后replaceWith

有什么问题？

【问题讨论】：

尝试.text() 而不是.replaceWith()
与replaceWith的结果相同
您希望发生什么？ .replaceWith() 会将整个 <li> 元素替换为您传递的内容，这样就可以摆脱 之前的文本，并且 它会摆脱图标。

标签： javascript jquery html replacewith

【解决方案1】：

改变这个：

$("li:first").replaceWith("Download Complete");

有了这个：

$("li:first").html('<i class="fa-li fa fa-square" id = "ToDo1"></i>Download Complete');

实际上，FlipFloop，您需要分别定位 <i> 元素和文本。将您的消息放入一个可以独立于标记替换的范围内，如下所示：

<li><i class="fa-li fa fa-square" id = "ToDo2"></i><span>text</span></li>


$("li:first i").removeClass("fa-spin fa-spinner").addClass("fa-check-square");
$("li:first span").text("Download Complete");

希望这会有所帮助。

【讨论】：

【解决方案2】：

问题是您替换了完整的LI 节点而不是其中的内部文本节点。为了能够对文本进行寻址，请将其包装在 SPAN 中，如下所示。

<ul class="fa-ul">
    <li><i class="fa-li fa fa-spinner fa-spin" id = "ToDo1"></i><span class="download-status">Downloading</span></li>
    <li><i class="fa-li fa fa-square" id = "ToDo2"></i>text</li>
    <li><i class="fa-li fa fa-square" id = "ToDo3"></i>text</li>
    <li><i class="fa-li fa fa-square" id = "ToDo4"></i>text</li>
</ul>

然后你可以像这样只更改你想要的文本。

setTimeout(function() {
    $("#ToDo1").removeClass("fa-spin fa-spinner");
    $("#ToDo1").addClass("fa-check-square");
    $("li:first > span").text("Download Complete");
    $("#ToDo2").addClass("fa-spin fa-spinner");
}, 2000);

【讨论】：

【解决方案3】：

啊，这是因为你的 li 元素中有 i 元素

所以你需要让 jQuery 在更改文本后添加一个 i 元素

所以.replaceWith 和.text 将摆脱i

所以你可以这样做

$('li:first').html('<i class="your font awesome class"></i>Download Complete');

【讨论】：

【解决方案4】：

试试下面的 sn-p ：

$(document).ready(function() {
  var time = 500;
  $('.load').each(function() {
    var temp = $(this);
    setTimeout(function() {
      temp.removeClass("fa-spin fa-spinner");
      temp.addClass("fa-check-square");
      temp.next("div").text("Download Complete");
      temp.next("i.load").addClass("fa-spin fa-spinner");
    }, 2000, temp);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="fa-ul">
  <li><i class="fa-li fa fa-spinner fa-spin load" id="ToDo1"></i>
    <div>Downloading</div>
  </li>
  <li><i class="fa-li fa fa-square load" id="ToDo2"></i>text</li>
  <li><i class="fa-li fa fa-square load" id="ToDo3"></i>text</li>
  <li><i class="fa-li fa fa-square load" id="ToDo4"></i>text</li>
</ul>

将文本包装在span 中，然后更改它，因为replaceWith 将替换li 的完整内容，包括icon。

【讨论】：