Question

我正在尝试为桌面游戏写一个角色创作助手。根据角色等级，玩家可以投入的开发点数量会发生变化。这是我在html5和jQuery中的第一个主要项目，但我认为这很简单。我使用了来自this question的建议，但我的价值观没有更新。我一直在用jsFiddle搞砸它，但无济于事。我的智慧结束了！这是我jsFiddle的链接。 jsFiddle只包含我想要使用的相关代码段。我让表格的其余部分正常工作。

HTML：

<strong>Level: </strong><input id="levelselect" type="number" min="0" max="20" />
You have <span id="DP"></span> DP to spend.

JS：

function calcDP() {
        var level = parseInt($('#levelselect').val(),10);
        var DPatZero = 400;
        var DPatOne = 600;
        var workDP = 0;

            if (level === 0){
                workDP = DPatZero;
            }
            else if(level == 1){
                workDP = DPatOne;
            }
            else {
                workDP = DPatOne + (level * 100);
            }
            var DP = workDP;

            $('#DP').text(DP);
        }

$('#levelselect').on('keydown keyup keypress', calcDP);

Answer 1

您将事件绑定到错误的元素。使用

$('#levelselect').on('keydown keyup keypress', calcDP);

而不是

$('#DP').on('keydown keyup keypress', calcDP);

它会起作用。

Answer 2

首先，您将选择器绑定在错误的元素上。而不是绑定事件

$('#DP')

你应该将他们绑定到

$('#levelselect')

其次，您希望捕获每个事件，为此使用事件“更改”以确保不仅捕获击键，而且还会捕获粘贴并按下输入旁边的向上和向下箭头：< / p>

function calcDP()
{
    var level = parseInt($('#levelselect').val(), 10);
    var DPatZero = 400;
    var DPatOne = 600;
    var workDP = 0;

    if (level === 0)
    {
        workDP = DPatZero;
    }
    else if (level == 1)
    {
        workDP = DPatOne;
    }
    else
    {
        workDP = DPatOne + (level * 100);
    }

    $('#DP').text(workDP);
}

$(document).ready(function()
{
    // Bind calcDP onchange to make sure every event is being caught.
    $('#levelselect').on('change', calcDP);

    // Call the onchange event to make sure the current value is evaluated
    $('#levelselect').change();
}

此外，在您最初的JSfiddle中，您使用Mootools作为左侧所需的框架而不是jQuery。

请参阅JS fidle获取完整脚本：http://jsfiddle.net/9M4cD/4/

在进行一些数学运算之后，jQuery不会更新值

2 个答案: