jQuery删除Font Awesome Icon

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节点而不是其中的内部文本节点。为了能够解决文本问题，请将其包装在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);

Answer 2

改变这个：

$("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 3

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

因此，在更改文本

之后，您需要使jQuery前置i元素

因此.replaceWith和.text将摆脱i

所以你可以这样做

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

Answer 4

请尝试以下代码段：

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