需要一些帮助来创建一个JQuery Calculator

Question

我自愿为一个小型非盈利组织创建影响计算器，我需要一些如何编码的指导。我尝试创建的计算器与此类似：http://www.stl.unitedway.org/give/impact-calculator/

我知道html和css，但是当谈到JQuery时，我是一个完整的新手。我知道我需要的逻辑类型。首先，使用选择器选择输入文本框内的数字，然后检查它是否是一个数字。如果它是一个数字，请围绕该数字并在文本框中显示更新的数字。然后创建一个if else语句来评估它们放入的数字，并根据它们放在输入文本下面的div内的美元金额输出结果。

我知道要使用的表单选择器：text但是我不确定如何评估他们输入的数字是否为数字，也不确定它是如何舍入的，如何编写if和else声明。我知道我可以使用.text（）或.html（）将结果插入div中。

我真的很感激任何帮助..我以前从未做过编程，但我自告奋勇，因为这是一个很好的事业......提前谢谢你，非常感谢..

Answer 1

我认为一个简单的方法是：

• 收听输入元素上的keyup事件，然后
• 确定它是否为数字
• 如果是，请应用一个功能，将其评为＆＃34;低＆＃34;，＆＃34;中＆＃34;或＆＃34;高＆＃34;捐赠
• 如果不是，则相应地显示错误消息

标记

<input type="text" id="input" value="5" />
<div id="message"></div>

的JavaScript

$(function () {

    var $input = $("#input");
    var $message = $("#message");
    var messages = {
        "low": "Some message about a low-tier donation",
        "medium": "Some message about a medium-tier donation",
        "high": "Some message about a high-tier donation",
        "error" : "Not a number value :("
    };

    function donationLevel(amt) {
        if (amt <= 25) {
            return "low";
        } else if (amt > 25 && amt <= 50) {
            return "medium";
        } else if (amt > 50) {
            return "high";
        }
    }

    $input.bind({
        'keyup': function () {
            var number = $(this).val();
            var isNumber = !isNaN(number);

            if (isNumber) {

                $message.text(messages[donationLevel(number)]);
            }
            else {
                $message.text(messages["error"]);
            }
        }
    });

    // Since we pre-filled our input with "5", 
    // trigger the keyup so we get our message

    $input.trigger('keyup');


});

Example Fiddle: http://jsfiddle.net/ETjTL/