2

行名に基づいてフォームアイテムの変更イベントを追加する関数があります（データベースを使用してこれらを取得します）。

現在の関数は次のとおりです。

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

これをすべての行に影響する呼び出しに統合して、DB部分を取り除き、すべての行に2つではなく2つ（または1つ）のコードを含めるにはどうすればよいですか。

4

4 に答える 4

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);
});
于 2012-04-07T04:24:34.667 に答える
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()ため、jQuery1.7以降が必要です。.delegate()以前のバージョンのjQueryでは、同じ効果を得ることができます。

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

于 2012-04-07T04:41:34.307 に答える
0

クラスセレクターとIDセレクターの主な違いは、IDセレクターが一意であると予想されるのに対し、クラスセレクターは一意ではないことです。

変更イベントの本体で$（this）を使用して、操作が相対的であるようにすると、すべてのケースを処理する単一の変更イベントを作成できます。

<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の原則に違反します。サーバー側のコードはデータを取得してクライアントに送信する役割を果たし、クライアント側のコードはビューを処理する役割を果たします。

于 2012-04-07T04:26:04.407 に答える
0

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

$('#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);
});
于 2012-04-07T04:39:06.180 に答える