jQuery 事件触发顺序答案

【问题标题】：jQuery events firing orderjQuery 事件触发顺序
【发布时间】：2012-02-12 23:34:52
【问题描述】：

我的页面上有大约 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 是否有该类。更新 if 语句如下

$('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 的容器。

【问题讨论】：

小心使用.live()，效率相当低。
jsperf.com/jquery-live-vs-delegate-vs-on

标签： jquery

【解决方案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 为您抽象了这一点。

【讨论】：

+1 表示.hasClass()，因为如果将来添加其他类会更安全。

【解决方案2】：

这...

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

应该是这个……

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

或者更好，这个...

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

【讨论】：

最好使用.hasClass，否则添加额外的类名会导致脚本失败。
@SamDufel：是的，我知道。我已经为它加上了另一个答案。不想添加它，因为 lonesomeday 先有它。