JavaScript/jQuery：如何使用运行点值创建任务列表

我不确定如何最好地用一个标题来描述我的问题，所以我希望这有点道理

让我解释一下我想做什么。我想创建一个任务列表小部件。用户在一个字段中写入任务描述，然后从列表中为该任务选择一个点值。点击提交！按钮，则使用jQuery将一个新项目添加到下面的无序列表中，该列表包含任务描述和分值。当用户单击列表中的某个项目时，该项目将被删除，并动态添加其关联的分值，再次使用jQuery将其添加到总分中，该总分显示在固定在角落的a中

我在制作表单或向列表中添加项目方面没有任何问题。然而，让我困惑的是，如何在单击任务时添加点值

我觉得这是一个任务对象，带有参数name和pointValue可能有用的地方，但我不能确切地弄清楚如何使用。当然，我可以创建对象，但是我如何将它与添加到页面中的HTML相关联，以便在单击它时，它将其点值添加到总值中？还是这完全是错误的做法

你可以看到我目前的进展。正如我所说的，我能想出如何让大多数事情都有效，而不是计分制

任何和所有的帮助都将不胜感激。我对jQuery和JavaScript还不熟悉，所以如果我犯了愚蠢的错误，请不要对我大发雷霆

谢谢。

请看：

---

另一个很好的例子可以在JSFIDLE上找到：

来自上述来源的js：

$(document).ready(function () {
    $('#button').click(function () {
        //save inputs as variables:
        var taskName = $('input[name=newTaskName]').val();
        var pointWorth = $('select[name=newTaskPoints]').val();

        //add a new list item for the task (and do it with spiffy animation)
        $('<li class="task"><div class="taskOuter"><div class="taskValue">+' + pointWorth + '</div><div class="taskDescription">' + taskName + '</div></div></li>')
            .hide().prependTo('#taskList').slideDown('fast');
    });

    //remove item (with spiffy animation) when clicked:
    $(document).on('click', '.task', function () {
        $(this).hide('fast', function () {
            $this.remove();
        });
        $("#score").html(parseInt($("#score").html(),10) + parseInt($(this).find(".taskValue").html(),10));
        //adding points happens somewhere in here but I'm completely baffled
    });
});

具有项目下拉区域 项目有任务，带有复选框

---

似乎就是这样。谢谢出于好奇，有没有办法做到这一点，而不运行parseInt，而是像我最初认为的那样将信息存储在变量中？还是说，这会让事情变得过于复杂？

$(document).ready(function () {
    $('#button').click(function () {
        //save inputs as variables:
        var taskName = $('input[name=newTaskName]').val();
        var pointWorth = $('select[name=newTaskPoints]').val();

        //add a new list item for the task (and do it with spiffy animation)
        $('<li class="task"><div class="taskOuter"><div class="taskValue">+' + pointWorth + '</div><div class="taskDescription">' + taskName + '</div></div></li>')
            .hide().prependTo('#taskList').slideDown('fast');
    });

    //remove item (with spiffy animation) when clicked:
    $(document).on('click', '.task', function () {
        $(this).hide('fast', function () {
            $this.remove();
        });
        $("#score").html(parseInt($("#score").html(),10) + parseInt($(this).find(".taskValue").html(),10));
        //adding points happens somewhere in here but I'm completely baffled
    });
});