我有三个播放按钮,一个简单的自定义播放器,以这种方式上市:切换类不工作
<div>
<div class="gs-player">
<div id="gs1" onclick="play(309689093)" class="fa fa-3x fa-play"></div>
</div>
<div class="gs-player">
<div id="gs2" onclick="play(316017522)" class="fa fa-3x fa-play"></div>
</div>
<div class="gs-player">
<div id="gs3" onclick="play(315363199)" class="fa fa-3x fa-play"></div>
</div>
</div>
我想这样做,当我点击他们每个人的是:
- 删除所有活动类(我用
fa-pause
) - 切换与
fa-pause
的div
我点击
我做了这样:
$(document).ready(function() {
$('.fa-play').click(function() {
$('.fa-pause').removeClass('fa-pause');
$(this).toggleClass('fa-pause');
});
});
基本上它的工作原理除了切换功能精细,看起来更像是一个addClass代替。如果我再次点击活动的div
,它不会删除fa-pause
。
JSFiddle中的行为更清晰。
另外,有没有办法做到这一点,而不使用框架?