0

I've been working on a project for 4 days now, completely written by hand, to see where I'm at with javascript (I've been going through the codecademy courses). I'm trying to create a browser based checklist program. So far I've written a clean menu interface that can dynamically create <div>s.

Here's what I've got on jsfiddle:
http://jsfiddle.net/SdCaf/1/

My questions:

  • Can I write the taskToggle() function more efficiently? Is there a jquery way to simplify it?

  • If you have the time to examine my code in the Fiddle; will it take to mysql easily, or have I created some goofy redundant kludges, that will make it difficult to update?

  • FIXED Why won't my formatTask() constructor add the check boxes and descriptions (as seen in it's if/else) - is there something wrong with my taskToggle() function, is it the checkbox <div> I'm trying to add, both, or something else?

The formatTask() constructor:

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();
    }
}

When I call it, it seems to accept all of it's parameters and I get no errors in the console, but it doesn't seem to run formatDiv(divId, divId + "box", "completeBox", "O"); and div.addDescription. You can see this for yourself if you click on "»Show Lists" in the result pane of the Fiddle (and you'll get an example of how the .addDescription() function should work)

Any other feedback you may wish to provide would be greatly appreciated. I need to know if I'm on the right track, or if I'm starting to write junky code that will become inelegant.
Thank you for your time if you give it!

4

3 回答 3

1

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

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

你不是这个意思吗？

$("#" + divId).addClass("incompleteTask");
$("#" + divId).removeClass("completeTask");
于 2012-07-24T05:41:54.367 回答
1

这里的问题是您为任务分配的 DOM ID 是“atask！” 这是无效的（因为！）字符。确保从您的 ID 和班级名称中删除无效字符！

于 2012-07-24T06:52:35.007 回答
0

将 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");
    }
};
于 2012-07-24T04:49:42.233 回答