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

您可以使用属性starts-with selector:

$('[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');
});