点击切换声音和类，但也在 6 秒后删除类

Question

我正在尝试使用jQuery添加类"活动的"；单击时指向链接，然后在6秒钟后自动删除。如果链接具有类"；活动的"；单击后，继续并删除类。我也在尝试这个链接来播放/停止播放mp3。

HTML:

<audio id="cat-growl-sound" controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>

<a id="cat-growl-link" href="javascript:void(0)">Fire Me!</a>

CSS：

audio { display: none; }
#cat-growl-link.active { color: red; }

JQUERY:

$('#cat-growl-link').click(function() {
$("#cat-growl-sound")[0].play();
$(this).addClass('active');
$(this).removeClass('active').delay(6000);
});
$('#cat-growl-link.active').click(function() {
$("#cat-growl-sound").stop();
$(this).removeClass('active');
});

我尝试了不同的方法来尝试让它发挥作用，但不同的方法只能让它的一部分发挥作用，而不是全部发挥作用。我选择在这里发布的这个脚本我认为最好地解释了我试图做的事情，尽管它不起作用。如何使其正常工作？

这是一个带有工作声音的jsFiddle：https://jsfiddle.net/tcmpguok/

Answer 1

几个问题。首先，delay()只适用于使用动画队列的jQuery方法——换句话说，异步操作。即便如此，只有在delay()之后链接的方法才会被延迟，而不是之前的方法

其次，您的第二个事件处理程序不是动态的；它将在页面加载时绑定到任何匹配#cat-growl-link.active的元素，而不是在将来，因为元素的类被添加/删除了。

总而言之，你可能想要这样的东西：

let audio = $("#cat-growl-sound")[0],
timeout;
$('#cat-growl-link').on('click', function() {
if (!$(this).is('.active')) {
$(this).addClass('active');
audio.play();
timeout = setTimeout(() => $(this).removeClass('active'), 6000);
} else {
$(this).removeClass('active');
clearTimeout(timeout);
audio.pause();
audio.currentTime = 0;
}
});