[英]jQuery removes Font Awesome Icon
I am using Font Awesome and jQuery in an experiment, after an animation, the jQuery replaces a loading icon in a list by a check, and the text changes too. 我在实验中使用Font Awesome和jQuery,在动画之后,jQuery通过检查替换列表中的加载图标,文本也发生了变化。 However, when I remove the jQuery
replaceWith
method, the icon stays: 但是,当我删除jQuery
replaceWith
方法时,图标保持:
HTML: 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: 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);
Result: 结果:
before: 之前:
After jQuery replaceWith
在jQuery
replaceWith
What is the problem? 问题是什么?
The problem is that you replace the complete LI
node instead of the inner text node inside it. 问题是您替换完整的
LI
节点而不是其中的内部文本节点。 To be able to address the text, wrap it in a SPAN
like this. 为了能够解决文本,请将其包装在这样的
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>
Then you can change only the text you want like this. 然后,您只能更改所需的文本。
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);
Change out this: 改变这个:
$("li:first").replaceWith("Download Complete");
With this: 有了这个:
$("li:first").html('<i class="fa-li fa fa-square" id = "ToDo1"></i>Download Complete');
In reality though, FlipFloop, you'll want to target your <i>
element and text separately. 实际上,FlipFloop,你会想要单独定位你的
<i>
元素和文本。 Put your message into a span you can target independently of your markup replacement, like so: 将您的邮件放入可以独立于标记替换目标的范围内,如下所示:
<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");
Hope this helps. 希望这可以帮助。
Ah it's because you have i
elements inside your li
elements 啊,因为你的
li
元素中有i
元素
So you'll need to make jQuery prepend an i
element after changing the text 因此,您需要在更改文本后使jQuery在
i
元素之前添加
So .replaceWith
and .text
will get rid of the i
所以
.replaceWith
和.text
将摆脱i
So you could do this 所以你可以做到这一点
$('li:first').html('<i class="your font awesome class"></i>Download Complete');
Try the following snippet : 请尝试以下代码段:
$(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>
Wrap the text in a span
and then change it since replaceWith
will replace the complete contents of the li
including the icon
. 裹在一个文本
span
,然后改变它,因为replaceWith
将替换的完整内容li
包括icon
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.