将字体真棒图标设置为jquery
[英]Set font awesome icon into jquery
问题描述
I am ussing html, css3 and jquery. 
我正在使用html，css3和jquery。 And i want to use font awesome icon into jquery. 我想在jquery中使用字体真棒图标。 But i don't know how to use font awesome icon into Jquery. 但我不知道如何使用字体真棒图标到Jquery。
FONT ICON: FONT ICON：
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
CODE: 码：
<div class="display-icon">
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
</div>
JQUERY CODE: JQUERY CODE：
$('.display-icon').click(function(){
-----FONT AWESOME ICON------
});
Font awesome icon working fine in the html code. 字体真棒图标在html代码中正常工作。 I want to set this icon into jquery code. 我想将此图标设置为jquery代码。
3 个解决方案
解决方案1
4 已采纳 2016-04-16 06:16:08
Here is a solution, I would suggest targeting with <i id="myId"> instead of the children of "display icon", more tighter... 这里是一个解决方案，我建议：靶向<i id="myId">而不是“显示图标” 孩子们 ，更紧......
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>
<div class="display-icon">
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
</div>
</body>
<script>
$('.display-icon').click(function() {
$(this).children("i").attr("class", "fa fa-circle-o-notch fa-pulse fa-3x fa-fw ") ;
});
</script>
</html>
解决方案2
1 2016-04-16 06:37:05
Try this: 试试这个：
$('.display-icon').click(function(){
$("#show-icon").addClass('fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw ');
});
and: 和：
<div class="display-icon">
click me :)
<i class="" id="show-icon"></i>
</div>
I hope this solves your problem :) 我希望这能解决你的问题:)
解决方案3
0 2016-04-16 07:28:59
If you want to add a spinner icon when button is clicked, you may insert at the desired place in the HTML and toggle visibility with javascript (jQuery in your case): 如果要在单击按钮时添加微调器图标，可以在HTML中的所需位置插入并使用javascript切换可见性（在您的情况下为jQuery）：
<script>
$(document).ready(function(){
$('#toggle-spinner').on('click', function(){
$('#my-spinner').toggle();
});
});
</script>
<input type="button" id="toggle-spinner" value="Toggle spinner"/>
<div id="my-spinner" class="display-icon" style="display: none"> <i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i> </div>
You may also add and remove an HTML element in DOM: 您还可以在DOM中添加和删除HTML元素：
$(' <div id="my-spinner" class="display-icon"> <i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i> </div> ').appendTo('body');
$('#my-spinner').remove();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.