jQuery问题，单击时替换了Font Awesome 5图标吗？
[英]jQuery issue with replacing Font Awesome 5 icon on click?
问题描述
I am trying to change a play button to be a pause button using Font Awesome 5 . 
我正在尝试使用Font Awesome 5将播放按钮更改为暂停按钮。 I don't understand why it seems to just not toggle on click. 我不明白为什么它似乎不切换点击。 It recognizes the clicks (I tried with an alert, so it recognizes when I press the button itself) but it will just not find the element inside and change it. 它可以识别单击（我尝试过警报，因此可以识别当我按下按钮本身时），但是它只是找不到内部的元素并进行更改。
This is my code: 这是我的代码：
$(".startButton").click(function() { $(this).find("i").removeClass("fa-play-circle").addClass("fa-pause-circle") });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> </head> <div id="timerWrapper"> <div class="valuesWrapper"> <div class="values"> 00:00:00</div> </div> <div id="buttonWrapper"> <button class="startButton"><i class="fas fa-play-circle"></i></button> <button class="stopButton">Stop</button> <button class="clearButton">Clear</button> </div> </div>
1 个解决方案
解决方案1
1 已采纳 2018-02-25 21:48:49
The main issue with your code is that you are using Font Awesome 5 that changes the i element to svg so your code won't work. 代码的主要问题是您使用的是Font Awesome 5，它会将i元素更改为svg因此您的代码将无法工作。
You have two solution: 您有两种解决方案：
The easiest one is to use the CSS version of Font Awesome 5 and you will be able to keep your code as it is: 最简单的方法是使用Font Awesome 5的CSS版本，您将能够按原样保留代码：
$(".startButton").click(function() { $(this).find("i").removeClass("fa-play-circle").addClass("fa-pause-circle"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"> <div id="timerWrapper"> <div class="valuesWrapper"> <div class="values"> 00:00:00</div> </div> <div id="buttonWrapper"> <button class="startButton"><i class="fas fa-play-circle"></i></button> <button class="stopButton">Stop</button> <button class="clearButton">Clear</button> </div> </div>
The other solution is to change your code in order to handle the SVG. 另一种解决方案是更改代码以处理SVG。 So you may change the data-icon attribute of the generated svg with the needed icon: 因此，您可以使用所需的图标更改生成的svg的data-icon属性：
$(".startButton").on('click',function() { $(this).find('svg').attr("data-icon",'pause-circle'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script> <div id="timerWrapper"> <div class="valuesWrapper"> <div class="values"> 00:00:00</div> </div> <div id="buttonWrapper"> <button class="startButton"><i class="fas fa-play-circle"></i></button> <button class="stopButton">Stop</button> <button class="clearButton">Clear</button> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.