jquery - 在两个onclick函数之间切换

我在HTML中创建了两个按钮，并编写了一些jQuery，以便当用户单击其中一个按钮时，新的CSS规则将应用于该按钮。该代码在下面工作：

$('#approve').on('click', function(){
    $('#approve:hover').css("background-color", "#24ce3a")
    $('#approve:hover').css("color","#FFF")
});
$('#reject').on('click', function(){
    $('#reject:hover').css("background-color", "#e32e10")
    $('#reject:hover').css("color", "#FFF")
});

如果单击#approve，我要为其赋予新颜色并禁用#reject按钮。下次单击#approve时，我想重置为原始样式，然后重新启用#reject按钮。 #reject按钮应具有类似的行为：单击时切换其自身的状态，并在其激活时禁用#approve按钮。

有什么想法我可以做到这一点吗？

最佳答案

当触发一个回调函数时，通过向其添加一个类来禁用另一个回调函数。下次单击时，请通过删除该类来重新启用该按钮。

var approveFunc = function() {
  if ($(this).is(".disabled")) {
    return;
  }
  $(this).toggleClass("active");
  $("#reject").toggleClass("disabled");
};

var rejectFunc = function() {
  if ($(this).is(".disabled")) {
    return;
  }
  $(this).toggleClass("active");
  $("#approve").toggleClass("disabled");
};

$('#approve').on('click', approveFunc);
$('#reject').on('click', rejectFunc);

div {
  color: blue;
  background-color: pink;
}
#approve.active {
  background-color: #24ce3a;
  color: #FFF;
}
#reject.active {
  background-color: #e32e10;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="approve">Approve</div>
<div id="reject">Reject</div>