1

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

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

4

3 回答 3

6

您可以使用属性开头选择器：

$('[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-22T12:20:44.930 回答
1

一种方法，如果您的输入共享类样式，您可以在 jquery中使用类选择器

$('.TextBox').on('blur', function () { 
    var $this = $(this); 
    if ($this.val() == '' || $this.val() === undefined) $this.val('0'); 
});
于 2012-06-22T12:20:51.267 回答
1

您可以使用通配符选择所有带有 TextBoxObiettivi 的 id satring 的元素

$("[id^=TextBoxObiettivi]").on('blur', function () { var $this = $('#TextBoxRisultati8'); if ($this.val() == '' || $this.val() === undefined) $this.val('0'); });
于 2012-06-22T12:21:05.317 回答