0

4入力（台数）の基本的なサンプル注文書です。値を入力すると、対応するすべての情報が表示され、計算が行われます (単位 * 価格)。別のアイテムを追加するたびに、注文の合計値を取得したいと考えています。値が更新されているときに orderTotal の計算に何か問題があり、値をまったくクリアすると、Order Total が完全に消えます。私はjQueryに非常に慣れていないので、助けが必要です。

作業フィドル: http://jsfiddle.net/nitadesign/97tnrepg/4/

そしてコード：

var orderTotal = 0 ;
$(".pack").keyup(function () {
    var curId = this.id.split("k")[1];
    var packName = $('#pack' + curId + '-name').val();
    var packPrice = $('#pack' + curId + '-price').val();
    var packUnit = $(this).val();
    var packTotal = packUnit * packPrice;
    
    orderTotal = orderTotal + packTotal;
    
    if ($(this).val() == '') {
         $("#packcontent_" + curId).hide();
         $("#order_total").hide();  
    } else {
        $("#packcontent_" + curId).html('Units : ' + packUnit + ', Name :  ' + packName + ', Price : ' + packPrice + ', Total : ' + packTotal);
        $("#packcontent_" + curId).show();
     	$("#order_total").html('Order Total: ' +orderTotal);
     	$("#order_total").show();   
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="content" id="packcontent_01" style="display: none;"></div>
<div class="content" id="packcontent_02" style="display: none;"></div>
<div class="content" id="packcontent_03" style="display: none;"></div>
<div class="content" id="packcontent_04" style="display: none;"></div>

<div class="content" id="order_total" style="display: none;"></div>

<p>Pack 1</p>
<input type="text" class="pack" name="pack01" id="pack01" autocomplete="off" maxlength="2" value="" />
<input type="hidden" class="pack" id="pack01-name" name="pack01-name" value="Pack 1" />
<input type="hidden" class="pack" id="pack01-price" name="pack01-price" value="5.00" />
<p>Pack 2</p>
<input type="text" class="pack" name="pack02" value="" id="pack02" autocomplete="off" maxlength="2" />
<input type="hidden" class="pack" id="pack02-name" name="pack02-name" value="Pack 2" />
<input type="hidden" class="pack" id="pack02-price" name="pack02-price" value="6.00" />
<p>Pack 3</p>
<input type="text" class="pack" name="pack03" value="" id="pack03" autocomplete="off" maxlength="2" />
<input type="hidden" class="pack" id="pack03-name" name="pack03-name" value="Pack 3" />
<input type="hidden" class="pack" id="pack03-price" name="pack03-price" value="7.00" />
<p>Pack 4</p>
<input type="text" class="pack" name="pack04" value="" id="pack04" autocomplete="off" maxlength="2" />
<input type="hidden" class="pack" id="pack04-name" name="pack04-name" value="Pack 4" />
<input type="hidden" class="pack" id="pack04-price" name="pack04-price" value="8.00" />

事前にどうもありがとうございました！

4

1 に答える 1

1

各反復で合計を保存および更新しているため、注文のリストを保持する orders 配列を作成してみることができます。したがって、将来さらに注文を追加する場合に備えて、これは動的になります。

あなたができることは、このような注文配列を作成することです.

var orders = [];

次に、注文の合計を取得、更新、および計算するための 3 つの関数を作成します。

注文を受ける

function GetOrder(curId){
    var order = null;

    for(i = 0; i< orders.length; i++){
        if(orders[i].id == curId){
            order = orders[i];
            break;
        }
    }

    return order;
}

注文の更新

function UpdateOrders(order){
    for(i = 0; i< orders.length; i++){
        if(orders[i].id == order.id){
            orders[i] = order;
            break;
        }
    }   
}

合計の計算

function CalculateTotal(){
    var total = 0;
    for(i = 0; i< orders.length; i++){
        total = total + orders[i].packTotal;
    }
    console.log(total);
    $("#order_total").html('Order Total: ' + total);
    if(total > 0){

        $("#order_total").show();
    }
}

これは同じための動作するJSFIDDLEです。お役に立てれば。

于 2015-08-28T19:43:27.183 に答える