在 jquery 单击函数中有两个类名

Question

我正在使用类 btn1 来控制某些按钮的显示。

我设置了一个可以正常工作的点击功能

$('#rotation').on('click', '.btn1'...

这为所有 btn1 按钮调用了相同的点击函数。

我试图弄清楚如何拥有相同的显示类，但为每个按钮调用不同的功能，例如

$('#rotation').on('click', '.btn1 process1'... 

当这个被点击

<div class="btn1 process1"> 

和

$('#rotation').on('click', '.btn1 process2'... 

当这个被点击

<div class="btn1 process2"> 

他们不工作。是否可以这样做，或者我是否需要为每个按钮设置 ID，并设置单击功能以侦听 ID 而不是类？

感谢您的时间和帮助。

Answer 1

jQuery 选择器遵循 CSS 规则，因此如果您想将一个元素定位为具有两个类，请不要在类名之间使用空格，如下所示：

$('#rotation')
    .on('click', '.btn1.process1', fn)
    .on('click', '.btn1.process2', fn);

或者，您可以使用单击处理程序并用于hasClass识别单击的按钮：

$('#rotation').on('click', '.btn1', function() {
    if ($(this).hasClass('process1')) {
        // do something
    }
    else if ($(this).hasClass('process2')) {
        // do something else
    }
})