我如何允许一个按钮根据它的类有两种不同的行为？
我如何允许一个按钮根据它的类有两种不同的行为？
提问于 2019-01-16 18:16:51
在bootstrap模式中，我有一个按钮，这个按钮的属性根据一些数据而改变，因此按钮可能有两种状态之一。
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>根据此按钮的状态，我希望它在单击时执行相应的javascript函数，可以是action1()或action2。
我尝试使用CSS选择器来启用它，但是下面的代码不起作用。我了解到，通过在不带空格(如.class1.class2 )的JQuery选择器中组合两个类，选择器将执行逻辑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 }我之所以使用类来确定行为，而不是使用特定的in，是因为使用类选择器.action-complete-task的其他函数会影响按钮的设计，因此我希望无论按钮处于哪种状态，按钮的设计都会生效。
回答 4
Stack Overflow用户
发布于 2019-01-16 18:20:35
这很容易做到。
$(".action-complete-task").on('click', function(event){
if($(this).hasClass('action-2')){
//Do action 2
}else{
//Do action 1
}
})Stack Overflow用户
发布于 2019-01-16 18:24:32
有许多解决方案，例如: 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
}
})Stack Overflow用户
发布于 2019-01-16 18:27:39
纯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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54214837
复制相关文章
相似问题
腾讯云开发者
