Javascript 单击jquery绑定两个事件

我想创建一个简单的用户交互，只需一个按钮即可开始和停止录制音频，如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');
  }
});

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

我知道不可能在同一个元素上绑定两个单击事件

事实并非如此，完全可以将同一事件类型的多个事件处理程序绑定到单个元素。您案例中的问题是因为两个处理程序相互冲突；一个设置类，另一个检测并删除该类

要解决这个问题，您需要使用单个事件处理程序来检测元素的状态，并根据该状态进行更新。在您的情况下，一个简单的

else

语句将起作用

$（'audioBtn'）。在（'click'，函数（e）上{
e、 预防默认值（）；
if（$（this）.hasClass（'active'））{
$（this）.removeClass（'active'）.addClass（'inactive'）；
console.log（“记录已停止”）；
}否则{
$（this）.addClass（'active'）.removeClass（'inactive'）；
console.log（“录制开始”）；
}
});

更进一步，您可以使用

toggleClass（）

交换类：

$('#audioBtn').on('click' , function(e){
  e.preventDefault();
  $(this).toggleClass('active');
});

$（'audioBtn'）。在（'click'，函数（e）上{
e、 预防默认值（）；
if（$（this）.hasClass（'active'））{
console.log（“记录已停止”）；
}否则{
console.log（“录制开始”）；
}
$（this.toggleClass（'active-inactive'）；
});
.active{
颜色：#C00；
}

启动/停止
要保持简单，只需
切换class（）
类：

$('#audioBtn').on('click' , function(e){
  e.preventDefault();
  $(this).toggleClass('active');
});

我认为只有活跃的课堂就足够了。您可以检查是否处于活动状态，只需切换即可。您可以通过检查id是否具有活动类来执行任何操作


$（'audioBtn'）。在（'click'，函数（e）上{
e、 预防默认值（）；
if（$（this）.hasClass（'active'））{
$（this.toggleClass（'active'）；
console.log（“记录已停止”）；
}否则{
$（this.toggleClass（'active'）；
console.log（“录制开始”）；
}
});

单击
为什么不使用
其他

？@CarlBinalla我已经尝试过，但不起作用，我不知道这是因为我在codepen上测试过，还是因为它不是Fire的事件建议您只使用一个类（默认css的活动覆盖规则），并改用“toggleClass”。选择代码并按CTRL+K，然后按CTRL+Return键保存编辑谢谢，它很有魅力，我可以使用

.toggleClass（）

也交换字体图标吗？。现在我使用的是这个代码

$（'#icon'）。removeClass（'fas-fa-2x'）。addClass（'fas-fa-stop-fa-2x'）是的，这样做很有效。您不需要在其中包含
fas
或
fa-2x
类，因为您先删除类，然后再添加回来，所以它是多余的。只需使用
$（'#icon'）。toggleClass（'fa-MICRICK fa stop'）