4
我正在尝试使用HTML和jQuery构建计算器。到目前为止,我有:根据下拉选项更改结果输入 - jQuery + HTML
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>
SCRIPT
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) (每日,每月,每周) - 单独 - 因此item1/item2/item3可以有任何选项(每日,每周,每月)。
结果应该默认显示在“每日”值中,结果输入可以通过任何选项再次过滤:每日,每周,每月。
因此,例如,我们有:
- 物品1 = 10(日)
- ITEM2 = 100(每周)
- 项目3 = 1000(每月)
这给了我们一个总计*:
- 每日:10 +(100/5)+(1000/20)= 80
- 每周:(10 * 5)+ 100 +(4分之1000)= 400
- 每月:(10 * 20)+(100 * 4)+ 1000 = 1600
*基于所述上面的例子,并考虑到1周= 5个工作日和1个月= 4周
在这一点上,我迷路了,我不知道如何将这些想法扔进使用jQuery的代码,所以任何帮助/指导将非常感激。预先感谢任何反馈!
P.S.如果我的方法由于任何原因不正确,我会非常乐意听到您的建议。
关于你的方法:我认为这是最好编写计算总计的函数。在任何事件(输入中的键入,选择中的更改)中,都可以执行该功能来重新计算。 – Pieter
您是否会友好地给我一个示例代码,我如何实现这一目标?我是jQuery中的新手,所以这将是一个真正的帮助。 – Adrian
http://jsfiddle.net/RS2MK/ – Pieter