Question

我有一个HTML文档，其格式如下：

<form>
    <input type="text" id="price">
    <input type="text" id="converted">
</form>

我还有以下JQuery：

$('#price').bind('keypress keyup', function() {
    amount = $(this).val() * 30;
    $('#converted').val(amount);
});

这就像我想要的那样。如果我在“价格”中输入金额，那么“转换”中的值将使用我输入的任何内容进行更新，再乘以30。

但是，我希望这支持两种不同的汇率，所以我在表单中创建了以下选择：

<select id="choice">
    <option value="1">Currency 1</option>
    <option value="2">Currency 2</option>
</select>

我知道我可以将上面的值设置为实际的汇率，然后这个问题就会很快得到解决。但是，我需要将值作为提交表单时的货币ID。因此，我已经提供了以下JSON对象：

[{"Currency":{"id":"1","rate":"30"}},{"Currency":{"id":"2","rate":"25"}}]

我在DOM中内联可用，因为每次在输入字段中输入新数字时我都不想浪费ajax请求。转换不需要是最新的。上面的JSON对象是使用CakePHP的$ javascript-＆gt;对象生成的，我可以将它显示在脚本标记内或任何其他方式使JQuery易于访问。

我正在努力的部分（可能在Google上找不到，因为我不知道使用哪个术语）是使用“30”或“25”作为第2个乘数的方法我的JQuery的行取决于选择中是否选择了选项值“1”或“2”。

Answer 1

var json = [{"Currency":{"id":"1","rate":"30"}},{"Currency":{"id":"2","rate":"25"}}];

$('#price').bind('keypress keyup', function() {
    var rate = $(json).filter(function() {
        return this.Currency.id == $('#choice').val();
    }).get(0).Currency.rate;
    var amount = $(this).val() * rate;    
    $('#converted').val(amount);
});

这是一个live demo，可以看到这一点。

Answer 2

选择更好的数据格式。在HTML中使用有意义的货币ID：

<select id="choice">
    <option value="GBP">Pounds</option>
    <option value="EUR">Euros</option>
</select>

然后将它们用作json对象中的键。请注意，不应引用数字。

//Assume base rate is dollars
var json = {
    "GBP": {
        "rate": 0.633
    },
    "EUR": {
        "rate": 0.725
    }
};

var price = $('#price'),
    currencyId = $('#choice'),
    converted = $('#converted');

price.keydown(function() {
    // Some browers call keydown before the character pressed has been added
    // to `.val()`. This gives them time to update the value
    setTimeout(function() {
        var currency = json[currencyId.val()];
        var amount = price.val() * currency.rate;
        converted.val(amount);
    }, 0);
});

demo

使用JSON对象中的数据进行动态货币转换

2 个答案: