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

希望这对您有所帮助。