javascript - 使用 jQuery 更新跨度，基于来自输入字段的简单实时计算

Question

所以我对一些 jQuery 有一个小问题，我会提供一些帮助。我有两个值，一个来自输入字段，另一个来自静态元素。所以它应该相当简单，我希望它尽可能“实时”。为此，我制作了一个 JSFIDDLE。请检查一下。

http://jsfiddle.net/pzSxL/2/

$('#bet-amount').keyup(function() {
var amount = $("#bet-amount").val();
var odds = 2;

var total = amount * odds;

$("#potential-payout").val(total); 
});

非常感谢任何帮助，我希望您能看到我想要更新包含 0 作为默认值的跨度。

最好的问候，安德烈！

Answer 1

试试这个：http: //jsfiddle.net/pzSxL/3/

 var total = amount * odds;

 $("#potential-payout").text(total);
       //  ------------^^^^^-----------you had to change this.

Answer 2

您犯了一个错误，span.val();您应该使用 html 或文本 jQuery 方法来更新跨度内的 html，另外，您应该从输入字段中解析值。所以这是你的功能。

$('#bet-amount').keyup(function() {
    var amount = parseFloat($("#bet-amount").val());
    var odds = 2;

    var total = amount * odds;

    $("#potential-payout").html(total); // sets the total price input to the quantity * price
});

Answer 3

您不能使用 val 函数来更改内部 html。Html 是正确的功能：

$("#potential-payout").html(total); 

Answer 4

$('#bet-amount').on('keyup', function() {
    var amount = parseFloat( this.value ),
        odds   = 2,
        total  = amount * odds;

    $("#potential-payout").text(total);
});

小提琴

value返回的结果总是一个字符串，所以要稍微解析一下，设置span的“value”时，其实不是value，而是文本内容，text()比较合适。