JQuery的选择优化

我有一个看起来遵循jQuery验证文件：JQuery的选择优化

$('#TextBoxRisultati2b').on('blur', function() { 
    var $this = $('#TextBoxRisultati2b'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxRisultati6b').on('blur', function() { 
    var $this = $('#TextBoxRisultati6b'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxRisultati10b').on('blur', function() { 
    var $this = $('#TextBoxRisultati10b'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxRisultati14b').on('blur', function() { 
    var $this = $('#TextBoxRisultati14b'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxRisultati18b').on('blur', function() { 
    var $this = $('#TextBoxRisultati18b'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxRisultati22b').on('blur', function() { 
    var $this = $('#TextBoxRisultati22b'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxRisultati4').on('blur', function() { 
    var $this = $('#TextBoxRisultati4'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxRisultati8').on('blur', function() { 
    var $this = $('#TextBoxRisultati8'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxRisultati12').on('blur', function() { 
    var $this = $('#TextBoxRisultati12'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxRisultati16').on('blur', function() { 
    var $this = $('#TextBoxRisultati16'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxRisultati20').on('blur', function() { 
    var $this = $('#TextBoxRisultati20'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxRisultati24').on('blur', function() { 
    var $this = $('#TextBoxRisultati24'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxObiettivi3').on('blur', function() { 
    var $this = $('#TextBoxObiettivi3'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxObiettivi6').on('blur', function() { 
    var $this = $('#TextBoxObiettivi6'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxObiettivi9').on('blur', function() { 
    var $this = $('#TextBoxObiettivi9'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 
$('#TextBoxObiettivi12').on('blur', function() { 
    var $this = $('#TextBoxObiettivi12'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxObiettivi15').on('blur', function() { 
    var $this = $('#TextBoxObiettivi15'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
}); 

$('#TextBoxObiettivi18').on('blur', function() { 
    var $this = $('#TextBoxObiettivi18'); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
});

的选择都是一样的。整个验证文件非常冗长。有没有办法优化这段代码？

来源

2012-06-22 AngeloBad

您可以使用attribute starts-with选择：

$('[id^=TextBoxRisultati]').on('blur', function() { 
    var $this = $(this); //Note that you can just use 'this' here 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
});

更重要的是，该事件委托给一个共同的祖先元素：

$('#someAncestor').on('blur', '[id^=TextBoxRisultati]', function() { 
    var $this = $(this); //Note that you can just use 'this' here 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
});

通过委派的事件处理程序越往上DOM树，你最终每个元素只有一个事件处理程序，而不是一个事件处理程序。这样更有效率。它的工作原理是因为大多数DOM事件都会从它们所源自的元素向上冒泡，因此您可以在祖先元素中捕获该事件。方法on检查发现事件的元素是否与选择器匹配，如果是，则运行事件处理程序。

还要注意的是val将（在你的情况下）总是返回一个字符串（从未undefined），这样你可以删除检查undefined。由于空字符串的计算结果为false，因此可以用较短的布尔比较来替换空字符串的比较结果。

所以，可以减少所有的代码，大块的在你的问题，只是这样的：

$('#someAncestor').on('blur', '[id^=TextBoxRisultati]', function() { 
    var $this = $(this); 
    if (!$this.val()) $this.val('0'); 
});

来源

2012-06-22 12:20:44

精彩回答！解决我的问题，并提高我可怜的jq技能。谢谢 – AngeloBad

@AngeloBad - 不客气，很高兴我能帮忙:) –

一个方式，如果你输入共用一类风格，你可以在jQuery中使用class selector

$('.TextBox').on('blur', function() { 
    var $this = $(this); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
});

来源

2012-06-22 12:20:51

可以使用通配符为选择具有ID的所有元素与TextBoxObiettivi

satring

$("[id^=TextBoxObiettivi]").on('blur', function() { var $this = $('#TextBoxRisultati8'); if ($this.val() == '' || $this.val() === undefined) $this.val('0'); });

来源

2012-06-22 12:21:05 Adil

JQuery的选择优化

回答

相关问题