Question

在引导模式下，我有一个按钮，此按钮的属性根据某些数据而变化，因此该按钮可能具有两种状态之一。

State1

<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>

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

我试图使用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
  }
})

Answer 2

有许多解决方案，例如： 1.在第一个按钮上添加action-1类，以便处理程序为

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

使它成为一个处理程序，但提供检查内部类的功能

$(".action-complete-task").on("click", function(e) {
  const buttonClass = e.target.attr('class')
  if (class.includes('action-2') {
    // handle action 2
  } else {
    // handle action 1
  }
})

Answer 3

纯JavaScript

检查所单击的元素是否包含“ action-2”类。

performAction = (e) => {
  if (e.className.indexOf('action-2') === -1){
    console.log('Perform Action 1')
  }
  else {
    console.log('Perform Action 2')  
  }
}

<button type="button" class="btn action-complete-task" onclick="performAction(this)">Action 1</button>
<button type="button" class="btn action-complete-task action-2" onclick="performAction(this)">Action 2</button>

Answer 4

据我所知，您可以将事件绑定到页面加载上存在的父元素，例如document

$(document).on('click','.action-complete-task:not(.action-2)',function(){
//...1
})

$(document).on('click','.action-complete-task.action-2',function(){
//...2
})

这样，它应该可以与手动插入的元素（DOM操作）一起使用，并且不会触发action1（因为您的.action-2也属于.action-complete-task，所以现在这样做了）

如何根据按钮的类允许按钮具有两个单独的行为？

4 个答案: