jQuery 移除 Font Awesome 图标

Question

我在一个实验中使用了 Font Awesome 和 jQuery，在一个动画之后，jQuery 用一个检查替换了列表中的加载图标，并且文本也发生了变化。但是，当我删除 jQueryreplaceWith方法时，图标保持不变：

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

希望这可以帮助。