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

Question

我在 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 按钮。

有什么办法可以实现吗？

Answer 1

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

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>