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>

Answer 2

正如不同的方法 - Fiddle

$(document).on('click', 'button', function () {
  if ($(".selected").length === 0 | $(this).hasClass("selected"))
  {
    $(this).toggleClass("selected");
  }
});

我没有更改内联css，而是添加了类selected。

如评论中所述，应根据实际标记缩小对类selected的元素的检查，以避免产生不必要的结果。例如。如果两个按钮都位于带有id="testing"的div中，则可以$("#testing .selected").length仅检查相关元素。

在两个onclick函数之间切换

2 个答案: