在单击 jquery 上绑定两个事件

Question

我想用一个按钮创建一个简单的用户交互来开始和停止录制音频，比如 whatsapp。我查看了 stackoverflow 以了解我是否错了，因为我知道不可能在同一个元素上绑定两个点击事件，所以我决定在 codepen 上测试代码，但它不会产生预期的结果：

$('#audioBtn').on('click' ,function(e){

  e.preventDefault();

  if( $(this).hasClass('active') ){

    $(this).removeClass('active')

    .addClass('inactive');

    console.log('Recording stopped');

  }

});

$('#audioBtn').on('click' , function(e){

  e.preventDefault();

  if( $(this).hasClass('inactive') ){

    $(this).addClass('active')

    .removeClass('inactive');

    console.log('Recording start');

  }

});

发生的事情是两个事件同时登录到控制台，但这不是我想要的，我只想在用户录制音频时使用相同的按钮开始和停止录音并更改图标。有没有办法做到这一点？

Answer 1

为了简单起见，您可以只toggleClass()使用类：$('#audioBtn').on('click' , function(e){  e.preventDefault();  $(this).toggleClass('active');});