0

顧客が希望の数量を指定すると、各製品の行の合計を計算する簡単な注文フォームを作成しています。

顧客が数量を変更すると、フォームに総計から明細行の合計を加算 (または減算) させようとしています。

ここで各行の合計を計算しています：

$('#qtybox').change(function(){
    qty = $(this).val()
    if(qty < 10)
        $('#linetotal').text(qty * 925);
    else
       $('#linetotal').text(qty * 895);
 });

$('#qtybox1').change(function(){
    qty1 = $(this).val()
    if(qty1 < 10)
        $('#linetotal1').text(qty1 * 1045);
   else
      $('#linetotal1').text(qty1 * 1015);
});    

$('#qtybox2').change(function(){
    qty2 = $(this).val()
    if(qty2 < 10)
        $('#linetotal2').text(qty1 * 1045);
   else
      $('#linetotal2').text(qty1 * 1015);
});

しかし、これらを総計に追加し、各数量入力フィールドがフォーカスされていないときに更新する方法に固執しています。どんな助けでも大歓迎です。

4

4 に答える 4

0

3 つの関数に 1 行追加するだけです (総計に id があると仮定しますgrandtotal)。

$('#grandtotal').text( $('#linetotal').val() + $('#linetotal1').val() + $('#linetotal2').val() )

コードに上記の行が含まれていることを確認してください。

$('#qtybox').change(function(){
    qty = $(this).val()
    if(qty < 10)
        $('#linetotal').text(qty * 925);
    else
       $('#linetotal').text(qty * 895);
    $('#grandtotal').text($('#linetotal').val() + $('#linetotal1').val() + $('#linetotal2').val() )

 });

$('#qtybox1').change(function(){
    qty1 = $(this).val()
    if(qty1 < 10)
        $('#linetotal1').text(qty1 * 1045);
   else
      $('#linetotal1').text(qty1 * 1015);
   $('#grandtotal').text($('#linetotal').val() + $('#linetotal1').val() + $('#linetotal2').val() )
});    

$('#qtybox2').change(function(){
    qty2 = $(this).val()
    if(qty2 < 10)
        $('#linetotal2').text(qty1 * 1045);
   else
      $('#linetotal2').text(qty1 * 1015);
    $('#grandtotal').text($('#linetotal').val() + $('#linetotal1').val() + $('#linetotal2').val() )
});
于 2013-01-13T06:34:03.413 に答える
0

うーん、次のようにすることをお勧めします。

1）qtybox、qtybox1などの他のすべての入力フィールドに行ったように、idを作成して正味合計テキストボックスに割り当てます..初期値を0に設定します2）価格を計算し、使用するJavaスクリプト関数でHTMLページに同じものを反映しているidフィールドは、そのスクリプト自体でこれらの値を最終的な合計ボックスの値に同時に追加し、そのテキストと他のテキストボックスの実行を動的に更新します..のようなものになる

if else ブロックの後に

$('#id-of-your-total-box').text(value-of-qty1+value-of-total-box);

注意：これらは、それを行う方法についての私の側からの段階的な提案です..最善を尽くします

于 2013-01-13T06:35:48.543 に答える
0

すべてのqtboxes、つまり1,2,3をクラスに入れ、.blur()イベントを使用して総計を更新します.このようなもの

$('.qtbox').blur(function(){
var total=0;
$('.qtbox').each(total+$(this).val());
$('#grandtotal').text(total);
})
于 2013-01-13T06:40:45.517 に答える
0

コードをリファクタリングすることで、コードをより読みやすく、拡張しやすくすることができます。共通のプロパティ (動作や外観など) を持つ要素にクラスを追加すると、より少ない数の関数を使用して物事を制御しやすくなります。このjsfiddleをチェックして、実際の例を確認してください。以下は JavaScript コンポーネントです。

var BULK_CUTOFF = 10,
  REGULAR_PRICES = [985, 1045, 1045],
  BULK_PRICES = [925, 1015, 1015];

function getPrice(qty, idx) {
  if (isNaN(qty)) {
    return 0;
  }
  if (qty < BULK_CUTOFF) {
    return qty * REGULAR_PRICES[idx];
  }
  return qty * BULK_PRICES[idx];
}

function updateGrandTotal() {
  var total = 0;
  $('input.linetotal').each(function () {
    var value = parseInt($(this).val());
    if (!isNaN(value)) {
      total += value;
    }
  });
  $('#grandtotal').val(total);
}

$('input.qtybox').keyup(function () {
  var $this = $(this),
    idx = $this.index('input.qtybox'),
    qty = parseInt($this.val());
  $this.next('.linetotal').val(getPrice(qty, idx));
  updateGrandTotal();
});
于 2013-01-13T08:06:45.303 に答える