我有三个播放按钮,用于一个简单的自定义播放器,以这种方式列出:
<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 中的行为更清晰。
还有,有没有办法不用框架就可以做到这一点?
最佳答案
您正在删除该类,然后将其重新打开。添加 .not(this)
,以避免这种情况。它将确保修改的元素不会是当前被点击的元素。
$(document).ready(function() {
$('.fa-play').click(function () {
$('.fa-pause').not(this).removeClass('fa-pause');
$(this).toggleClass('fa-pause');
});
});
function play () {}; //remove this line, I used this just to avoid error (because we don't have your full code).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<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>
关于jquery - 切换类不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43287330/