Question

我是JavaScript世界的新手，我正在尝试学习如何使用vanilla JS来编写一个按钮，该按钮将在＃34; play＆＃34;之间切换状态。并且＆＃34;暂停。＆＃34;我遇到的问题是，我可以在控制台中验证我的代码是否成功切换了＆＃34; i＆＃34;标签，但图像似乎没有更新。

这种变化是不是以某种方式反映在DOM树中？

HTML

return Response::json([
    'success' => 'Your E-mail was sent! Allegedly.',
    'alert-class' => 'alert-success'
]);

JS

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

Answer 1

有工作代码示例：

＆＃13;

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');
    }
});

＆＃13;

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

＆＃13;

Answer 2

我通过使用非SVG版本的Font Awesome（4.7.0）解决了这个问题。这样，我的JavaScript就不会与FA的JS一起控制他们在第5版中使用的SVG图标。

带有字体真棒图标的JavaScript切换按钮

2 个答案: