Javascript 基于下拉选项更改结果输入-jQuery+；HTML

我正在尝试使用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>

下面是一个包含上述位的工作JSFIDLE：

其想法是最终用户应该能够使用任何选项（每日、每月、每周）单独添加值（item1、item2和item3），因此item1/item2/item3可以有任何选项（每日、每周、每月）

默认情况下，结果应以“每日”值显示，并且结果输入可再次通过任何选项进行过滤：每日、每周、每月

例如，我们有：

项目1=10（每日）

项目2=100（每周）

项目3=1000（每月）

这给了我们总共*的：

• 每日：10+（100/5）+（1000/20）=80
• 每周：（10*5）+100+（1000/4）=400
• 每月：（10*20）+（100*4）+1000=1600

*基于上述示例，并考虑到1周=5个工作日，1个月=4周

在这一点上，我迷路了，我不知道如何使用jQuery将这些想法融入到代码中，因此任何帮助/指导都将不胜感激。提前感谢您的反馈

---

注意：如果我的方法因任何原因不正确，我将非常高兴听到您的建议。

制作一个函数，执行完整的计算，然后将表单输入委托给它并选择更改事件

---

关于你的方法：我认为最好写一个函数来计算总数。在任何情况下（输入中的键控，选择中的更改），您都可以执行该函数来重新计算。您能给我一个示例代码，说明如何实现这一点吗？我是jQuery的新手，所以这将是一个真正的帮助。

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

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