jQuery 删除 Font Awesome 图标

Question

我在实验中使用了 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

有什么问题？

Answer 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");

希望对您有所帮助。

Answer 2

啊，那是因为你的 li 个元素里面有 i 个元素

因此您需要 jQuery 在更改文本后添加一个 i 元素

所以 .replaceWith 和 .text 将摆脱 i

所以你可以这样做

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

Answer 3

试试下面的代码片段：

$(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.

Answer 4

问题是您替换了完整的 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);

jQuery 删除 Font Awesome 图标

jQuery removes Font Awesome Icon

html

javascript

jquery

replacewith