帶字體真棒圖標的JavaScript切換按鈕

Question

我是JavaScript世界的新手，我正在嘗試學習如何使用香草JS來編寫一個按鈕，該按鈕將在“播放”和“暫停”之間切換其狀態。 我遇到的問題是，我可以在控制台中驗證我的代碼是否成功切換了“ i”標簽的類，但是圖像似乎沒有更新。

此更改是否以某種方式未反映在DOM樹中？

HTML

<a href="#" id="playBtn" class="btn btn-primary">
   <i class="fas fa-play" id="transportIcon"></i>
</a>

JS

var getBtn = document.getElementById('playBtn');
var getIcon = document.getElementById('transportIcon');

getBtn.addEventListener('click', function () {
    if (getIcon.className === 'fas fa-play') {
        getIcon.setAttribute('class', 'fas fa-pause');
    } else {
        getIcon.setAttribute('class', 'fas fa-play');
    }
});

Answer 1

有工作代碼示例：

 var getBtn = document.getElementById('playBtn'); var getIcon = document.getElementById('transportIcon'); getBtn.addEventListener('click', function () { if (getIcon.classList.contains('fa-play')) { getIcon.classList.remove('fa-play'); getIcon.classList.add('fa-pause'); } else { getIcon.classList.remove('fa-pause'); getIcon.classList.add('fa-play'); } }); 

 <a href="#" id="playBtn" class="btn btn-primary"> <i class="fas fa-play" id="transportIcon"></i> </a> 

Answer 2

我通過使用非SVG版本的Font Awesome（4.7.0）解決了此問題。 這樣，我的JavaScript就不會與控制它們在版本5中使用的SVG圖標的FA的JS戰斗。