4

HTML と jQuery を使用して電卓を作成しようとしています。これまでのところ、私は持っています:

HTML

<form accept-charset="UTF-8" action="#" id="calc" method="post">
    <div class="item-1">
        <label for="item-1">Item 1</label>
        <input class="income" id="item-1" size="50" />
        <select id="select-item-1" class="select">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
        </select>
    </div>
    <div class="item-2">
        <label for="item-2">Item 2</label>
        <input class="income" id="item-2" size="50" />
        <select id="select-item-2" class="select">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
        </select>
    </div>
    <div class="item-3">
        <label for="item-3">Item 3</label>
        <input class="income" id="item-3" size="50" />
        <select id="select-item-3" class="select">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
        </select>
    </div>
    <hr />
    <div class="grand-total">
        <label for="grand-total">Total :</label>
        <input id="grand-total" size="50" disabled />
        <select id="grand-total-filter" class="select">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
        </select>
    </div>
</form>

脚本

var $form = $('#calc'),
    $summands = $form.find('.income'),
    $sumDisplay = $('#grand-total');

    $form.delegate('.income', 'change', function (){
        var sum = 0;
        $summands.each(function () {
            var value = Number($(this).val());
            if (!isNaN(value)) sum += value;
    });

    $sumDisplay.val(sum);
});

$("#grand-total-filter").change(function() {
        var e = document.getElementById("grand-total-filter");
        var strUser = e.options[e.selectedIndex].value;
        if (strUser == 'monthly' ) {
            // Monthly
        } else if (strUser == 'weekly' ) {
            // Weekly
        } else {
            //  Default (Daily)
        }
    });

上記のビットを使用した動作中の jsFiddle は次のとおりです: http://jsfiddle.net/4Q8Gh/1/

アイデアは、エンド ユーザーが任意のオプション (毎日、毎月、毎週) を使用して値 (item1、item2、および item3) を個別に追加できるようにする必要があるということです。 ）。

結果はデフォルトで「毎日」の値で表示され、結果の入力は、毎日、毎週、毎月のいずれかのオプションで再度フィルタリングできます。

たとえば、次のようになります。

  1. item1 = 10 (毎日)
  2. item2 = 100 (毎週)
  3. item3 = 1000 (毎月)

TOTAL* は次のようになります。

  • 毎日: 10 + (100/5) + (1000/20) = 80
  • 毎週: (10*5) + 100 + (1000/4) = 400
  • 毎月: (10*20) + (100*4) + 1000 = 1600

*上記の例に基づき、1 週間 = 5 営業日、1 か月 = 4 週間として計算

この時点で私は迷っており、jQuery を使用してこれらのアイデアをコードにどのように組み込むことができるかわかりません。そのため、ヘルプ/ガイダンスは大歓迎です。フィードバックをお寄せいただきありがとうございます。

PS私のアプローチが何らかの理由で正しくない場合は、あなたの提案を聞いて喜んでいます.

4

1 に答える 1

1

完全な計算を実行する 1 つの関数を作成し、フォームの INPUT および SELECT 変更イベントを委任します。

http://jsfiddle.net/RZpnz/

function calculate() {
    var sum = 0;
    $("#calc").find("input.income").each(function() {
        var val = parseFloat($(this).val());
        if(!isNaN(val)) {
            var unit = $("#select-" + this.id).val();
            switch(unit) {
                case "daily": sum += val; break;
                case "weekly": sum += val / 5; break;
                case "monthly": sum += val / (5 * 4); break;
                default: break;
            }
        }
    });
    var unit = $("#grand-total-filter").val();
    switch(unit) {
        case "daily": sum *= 1; break;
        case "weekly": sum *= 5; break;
        case "monthly": sum *= (5 * 4); break;
        default: break;
    }
    $("#grand-total").val(sum);
}
$("#calc").delegate("input.income", "change", calculate);
$("#calc").delegate("select.select", "change", calculate);
于 2013-07-15T18:18:55.593 に答える