jQuery問題，單擊時替換了Font Awesome 5圖標嗎？

Question

我正在嘗試使用Font Awesome 5將播放按鈕更改為暫停按鈕。 我不明白為什么它似乎不切換點擊。 它可以識別單擊（我嘗試過警報，因此可以識別當我按下按鈕本身時），但是它只是找不到內部的元素並進行更改。

這是我的代碼：

 $(".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>

Answer 1

代碼的主要問題是您使用的是Font Awesome 5，它會將i元素更改為svg因此您的代碼將無法工作。

您有兩種解決方案：

最簡單的方法是使用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>

另一種解決方案是更改代碼以處理SVG。 因此，您可以使用所需的圖標更改生成的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>

jQuery問題，單擊時替換了Font Awesome 5圖標嗎？

問題描述

1 個解決方案

解決方案1
1 已采納 2018-02-25 21:48:49

jQuery問題，單擊時替換了Font Awesome 5圖標嗎？

問題描述

1 個解決方案

解決方案1 1 已采納 2018-02-25 21:48:49

解決方案1
1 已采納 2018-02-25 21:48:49