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

属性starts- withselectorを使用できます：

$('[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ツリーの上位に委任すると、要素ごとに1つではなく、1つのイベントハンドラーのみになります。これははるかに効率的です。これは、ほとんどの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でidsatringを持つすべての要素の選択にワイルドカードを使用できます

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