javascript - 如何允许一个按钮根据其类别具有两种不同的行为？

Question

在 Bootstrap 模式中我有一个按钮，这个按钮的属性根据一些数据而改变，因此按钮可能有两种状态之一。

状态1

<button type="button" class="btn action-complete-task">Action 1</button>

状态 2

<button type="button" class="btn action-complete-task action-2">Action 2</button>

根据此按钮的状态，我希望它在单击时执行相应的 javascript 函数，action1() 或 action2。

我曾尝试使用 CSS 选择器来启用它，但是我下面的代码不起作用。我读到，通过在不带空格的 JQuery 选择器中组合两个类，例如 .class1.class2，选择器将执行逻辑 AND，并且只会选择同时包含 class1 的元素和 class2。

在我下面的代码中，我有 $("#EditTask .action-complete-task.action2")，它应该只选择同时具有两个类的元素 .action-complete- task 和 .action-2，但是在这个特定场景中只有 action1() 函数被执行。

//Action1()
$(".action-complete-task").on("click", function (event) { //do action 1 }

//Action2()
$(".action-complete-task.action-2").on("click", function (event) { //do action 2 }

我想使用类而不是特定 ID 来确定行为的原因是，还有其他函数会影响使用类选择器 .action-complete-task 的按钮设计，因此，无论按钮处于哪种状态，我都希望按钮的设计能够生效。

Answer 1

这很容易做到。

$(".action-complete-task").on('click', function(event){
  if($(this).hasClass('action-2')){
    //Do action 2
  }else{
    //Do action 1
  }
})