jQuery関数の最小化

Question

私は行の名前に基づいてフォームアイテムの変更イベントを追加する機能を持っています（これらを取得するためにデータベースを使用します）。

相続人は、現在の機能：私はDB部分を取り除くと、持っているだけで2枚（または1）、コードの代わりにできるように、私はすべての行に影響を与えコールにこれを統合することができますどのように

$sql = "SELECT * FROM product WHERE storeno = '1' ORDER BY descript"; 
    $result = mssql_query($sql, $msConnection); 

    if ($result && mssql_num_rows($result) > 0) { 
     while ($row = mssql_fetch_object($result)) { 
      $sku = trim($row->mas90sku); 
      $JQueryReadyScripts .= " 
      $('#newCount_" . $sku . "_row .cases').change(function() { 
       var count = 0; 
       $('#newCount_" . $sku . "_row .cases').each(function() { 
        count += parseFloat($(this).val()); 
       }); 
       $('#cases_total_" . $sku . "').text(count); 
      }); 
      $('#newCount_" . $sku . "_row .units').change(function() { 
       var count = 0; 
       $('#newCount_" . $sku . "_row .units').each(function() { 
        count += parseFloat($(this).val()); 
       }); 
       $('#units_total_" . $sku . "').text(count); 
      });"; 
     } 
     mssql_free_result($result); 
    } 

すべての行に対して2の値を返します。あなたが例と単位の両方のために、このような何かを行うことができ

Answer 1

$('*[id^=newCount_]').each(function() { 
    var $row = $(this), 
     sku = this.id.replace(/newCount_(.*?)_row/, '$1'); 

    function sumValues($elems) { 
    var sum = 0; 
    $elems.each(function() { sum += parseFloat(this.value) }); 
    return sum; 
    } 

    $.each(['cases', 'units'], function (i, type) { 
    $row.on('change', '.' + type, function() { 
     $('#' + type + '_total_' + sku).text(sumValues($row.find('.' + type))); 
    }); 
    }); 
}); 

これはPHPに依存しませんが、普通のスクリプトとして使用します。

.on()イベント委任を使用しているため、jQuery 1.7+が必要です。 jQueryの以前のバージョンでは、同じ効果のために.delegate()を使用することができます。

あなたのすべての行に共通のCSSクラスを与えることをお勧めします。それで、それほどうれしくない$('*[id^=newCount_]')はもっと簡単なものに置き換えることができますが、これは化粧品の変更です。

Answer 2

（ちょうどあなたが適切総カウントのIDを変更する必要があります、注意してください）

$('.cases').change(function() { 
    var id = $(this).attr('id'); 
    var count = 0; 
    $('#'+id+' .cases').each(function() { 
     count += parseFloat($(this).val()); 
    }); 
    $('#count_'+id).text(count); 
}); 

Answer 3

クラスセレクタとIDセレクタの主な違いはどこにidセレクタはユニークであることが期待され、クラスセレクタはユニークではありません。

変更イベントの本体で$（this）を使用すると、操作が相対的なので、すべてのケースを処理する1つの変更イベントを書き込むことができます。

<input class="cases" id="newCount_123"></input> 
<input class="cases" id="newCount_345"></input> 

$('.cases').change(function() { 
      var count = 0; 
      var sku = $(this).attr("id"); 
      count += parseFloat($(this).val()); 
      $('#cases_total_' + sku).text(count); 
}); 

これはまた、JavaScriptをPHPから取り除きます。これは、保守が難しく、MVCの原則に違反します。サーバー側のコードは、データを取得してクライアントに送信する作業を行い、クライアント側のコードはビューを処理します。

Answer 4

これが両方の機能に対応しているかどうかはわかりません。正確なマークアップが不明です。試してみる価値があるかもしれません。

$('#newCount_' + $sku + '_row .cases, #newCount_' + $sku + '_row .units').change(function() { 
    var count = 0, 
     thisClass = ($(this).hasClass('cases')) ? 'cases' : 'units'; 

    $('#newCount_" . $sku . "_row .'+thisClass).each(function() { 
     count += parseFloat($(this).val()); 
    }); 
    $('#'+thisClass+'_total_" . $sku . "').text(count); 
});