传递参数的问题，以及为 MYSQL 集成准备好代码

Question

我已经在一个项目上工作了 4 天，完全是手工编写的，看看我在 javascript 方面的进展情况（我一直在学习 codecademy 课程）。我正在尝试创建一个基于浏览器的清单程序。到目前为止，我已经编写了一个干净的菜单界面，可以动态创建<div>s。

这是我在 jsfiddle 上得到的：
http://jsfiddle.net/SdCaf/1/

我的问题：

• 我可以更高效地编写taskToggle() 函数吗？有没有 jquery 方法来简化它？

• 如果您有时间检查我在 Fiddle 中的代码；会不会很容易使用 mysql，还是我创建了一些愚蠢的冗余 kludges，这会导致难以更新？

• 已修复 为什么我的 formatTask() 构造函数不添加复选框和描述（如 if/else 所示） - 我的 @987654325 有问题吗@函数，是我要添加的复选框<div>，还是其他？

formatTask() 构造函数：

function formatTask(target, divId, content, description, complete) {

    function taskToggle() {
        if ($(this).hasClass("completeTask")) {
            $("#" + divId).attr("class", "incompleteTask");
            $("#" + divId + "Box").attr("class", "incompleteBox");
        }
        else if ($(this).hasClass("incompleteTask")) {
            $("#" + divId).attr("class", "completeTask");
            $("#" + divId + "Box").attr("class", "completeBox");
        }
    };

    if (complete) {
        var div = new formatDiv(target, divId, "completeTask", content, taskToggle, description);
        formatDiv(divId, divId + "Box", "completeBox", "O");
        div.addDescription();
    }
    else {
        var div = new formatDiv(target, divId, "incompleteTask", content, taskToggle, description);
        formatDiv(divId, divId + "Box", "incompleteBox", "[ ]");
        div.addDescription();
    }
}

当我调用它时，它似乎接受了它的所有参数并且我在控制台中没有收到任何错误，但它似乎没有运行formatDiv(divId, divId + "box", "completeBox", "O"); 和div.addDescription。如果您在 Fiddle 的结果窗格中单击“»显示列表”，您可以自己看到这一点（您将获得 .addDescription() 函数应该如何工作的示例）

您可能希望提供的任何其他反馈将不胜感激。我需要知道我是否走在正确的轨道上，或者我是否开始编写会变得不优雅的垃圾代码。
如果您愿意，感谢您的宝贵时间！

Answer 1

这里的问题是您为任务分配的 DOM ID 是“atask！”这是无效的（因为！）字符。确保您通过您的 ID 和类名remove invalid characters！

Answer 2

你确定当你这样说的时候：

$("#" + divId).attr("class", "incompleteTask");

你不是这个意思吗？

$("#" + divId).addClass("incompleteTask");
$("#" + divId).removeClass("completeTask");

Answer 3

将 taskToggle() 与 formatTask() 分开，然后像这样在 formatTask() 中调用 taskToggle()

function formatTask(target, divId, content, description, complete) {

 taskToggle();

 if (complete) {
    var div = new formatDiv(target, divId, "completeTask", content, taskToggle, description);
    formatDiv(divId, divId + "Box", "completeBox", "O");
    div.addDescription();
}
else {
    var div = new formatDiv(target, divId, "incompleteTask", content, taskToggle, description);
    formatDiv(divId, divId + "Box", "incompleteBox", "[ ]");
    div.addDescription();
}


}

function taskToggle() {
    if ($(this).hasClass("completeTask")) {
        $("#" + divId).attr("class", "incompleteTask");
        $("#" + divId + "Box").attr("class", "incompleteBox");
    }
    else if ($(this).hasClass("incompleteTask")) {
        $("#" + divId).attr("class", "completeTask");
        $("#" + divId + "Box").attr("class", "completeBox");
    }
};