Question

我的页面上有大约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单击功能，然后是类单击功能。当我尝试点击它以将其关闭时，会出现问题。 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'来绑定元素。与jQuery 1.7中较新的'.on（）'函数相比，它已被弃用且表现不佳，因此我将处理程序更改为这样

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

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

Answer 1

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

这不符合您的想法。它将class设置为select_statement_option_off，然后返回jQuery选择。（参见attr。）这将始终是真实的，因此条件总是会通过。该类也将始终为select_statement_option_off，因此是另一种行为。

你需要做一个比较。您可以使用===执行此操作：

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

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

if ($(this).hasClass('select_statement_option_off')) {

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

Answer 2

此...

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

应该是这个......

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

或更好，这......

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

jQuery事件触发顺序

2 个答案: