JQuery选择优化

Question

我有一个 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');
});

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

Answer 1

您可以使用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');
});

更好的是，将事件委托(delegate)给共同的祖先元素:

$('#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将(在您的情况下)始终返回一个字符串(从不未定义)，因此您可以删除对未定义的检查。由于空字符串的计算结果为 false，因此您可以使用更短的 bool 比较来替换与空字符串的比较。

因此，您可以将问题中的所有大代码块减少为:

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