jQuery事件触发顺序

我的页面上有大约30个可点击的div，所以我想我应该使用它们的类名来触发点击事件

$('div.select_statement_option_on').live('click', function() {
    $(this).attr('class', 'select_statement_option_off');
});
$('div.select_statement_option_off').live('click', function() {
    $(this).attr('class', 'select_statement_option_on');        
});

现在我遇到了一个障碍，在35个div中的一个被点击，一些额外的工作被完成，所以我添加了这个

$('div#sel_total_cost').click(function() {
    if ($(this).attr('class', 'select_statement_option_off')) {
        $('div#sel_reg_type').attr('class', 'select_statement_option_on');
        $('div#sel_days_reg').attr('class', 'select_statement_option_on');
        $('div#sel_add_tickets').attr('class', 'select_statement_option_on');
        $('div#sel_reg_date').attr('class', 'select_statement_option_on');
        $('div#sel_pcode_disc').attr('class', 'select_statement_option_on');
    }
});

因此，在#sel_total_cost div中，如果我从初始状态（select#statement_option_off）单击它，就会触发ID click函数，然后触发class click函数。当我试图点击它来关闭它时，麻烦就来了。ID函数被激发，然后由于某种原因div的类被更改为“off”（没有“on”类函数激发），然后“off”类函数被激发，div重新开启。这是我从中看到的，但要看它，它基本上意味着一旦它打开，你就不能关闭它。我怎样才能把事情的顺序整理好呢

来自lonesomeday的回答

原来if语句是在分配类，而不是检查我的div是否有那个类。如果声明如下，则更新

$('div#sel_total_cost').click(function() {
    if ($(this).hasClass('select_statement_option_off')) {
        $('div#sel_reg_type').attr('class', 'select_statement_option_on');
        $('div#sel_days_reg').attr('class', 'select_statement_option_on');
        $('div#sel_add_tickets').attr('class', 'select_statement_option_on');
        $('div#sel_reg_date').attr('class', 'select_statement_option_on');
        $('div#sel_pcode_disc').attr('class', 'select_statement_option_on');
    }
});

还要注意的是，不要再使用“live”绑定元素。与jQuery1.7中较新的“.on（）”函数相比，它已被弃用，性能较差，因此我将处理程序更改为如下所示

$('div#select_statement_box').on('click', 
    'div.select_statement_option_off', function() {
    $(this).attr('class', 'select_statement_option_on');
});

其中select语句框是包含我的div的容器

if ($(this).attr('class', 'select_statement_option_off')) {

那和你想的不一样。它将

class

设置为

select\u statement\u option\u off

，然后返回jQuery选择。（请参阅）这将始终是真实的，因此条件将始终通过。该类也将始终是

select\u statement\u option\u off

，因此会出现其他行为

你需要做一个比较。您可以使用

==

执行此操作：

if ($(this).attr('class') === 'select_statement_option_off') {

最好让jQuery完成工作并使用：

这还有一个额外的优势：如果您的HTML将来更改以添加其他类（这完全有可能！），那么最后一个选项将不需要更改Javascript。jQuery会为您抽象出这些内容

那和你想的不一样。它将

class

设置为

select\u statement\u option\u off

，然后返回jQuery选择。（请参阅）这将始终是真实的，因此条件将始终通过。该类也将始终是

select\u statement\u option\u off

，因此会出现其他行为

你需要做一个比较。您可以使用

==

执行此操作：

if ($(this).attr('class') === 'select_statement_option_off') {

最好让jQuery完成工作并使用：

这还有一个额外的优势：如果您的HTML将来更改以添加其他类（这完全有可能！），那么最后一个选项将不需要更改Javascript。jQuery会为您提取这些信息。

这是

if ($(this).attr('class', 'select_statement_option_off')) {

应该是这个

if ($(this).attr('class') === 'select_statement_option_off') {

或者更好，这个

if (this.className === 'select_statement_option_off') {

这个

if ($(this).attr('class', 'select_statement_option_off')) {

应该是这个

if ($(this).attr('class') === 'select_statement_option_off') {

或者更好，这个

if (this.className === 'select_statement_option_off') {

---

小心使用

.live（）

，效率相当低。小心使用

.live（）

，效率相当低。

.hasClass（）

为+1，因为将来添加其他类会更安全。

.hasClass（）为+1

因为将来添加额外的类会更安全。最好使用

.hasClass

，否则添加额外的类名会导致脚本失败。@SamDufel:是的，我知道。我已经找到了另一个答案。我不想添加它，因为它是第一个。最好使用

.hasClass

，否则添加额外的类名会导致脚本失败。@SamDufel:是的，我知道。我已经找到了另一个答案。我不想添加它，因为我先有了它。