0

我一直在尝试制作一个待办事项列表，并且到目前为止添加和删除工作正常。我必须添加一个部分以将项目标记为已完成，因此我得到了一些代码以按照我喜欢的方式正常工作。在试验代码时，我总是尝试处理一个单独的文件，所以当我让它工作时，我尝试将它转移到待办事项文件中，但现在它不起作用。我发现它不起作用的原因是因为我没有针对项目 id（当它输入到列表时生成的那个）我尝试以与删除目标 id 相同的方式执行此操作：

function completeTodo() {

    var todo_item = $(this).parent();

    if (todo_item) {

        var id = parseInt( todo_item.attr('id').replace('item', '') );

        if (id) {
            if (Modernizr.localstorage) {
                if (localStorage.todos) {

                    var todo_list = JSON.parse(localStorage.todos);


                    if (localStorage.getItem("background") != null) {
                        getImage = localStorage.background;
                        $(".done").addClass(getImage);
                    }


                    $(document).ready(function () {
                        $('.palette').click(function () {
                            getImage = localStorage.background;
                            $(".done").removeClass(getImage);
                            localStorage.removeItem('background');
                            var setImage = $(this).attr(id);
                            $(".done").addClass(setImage);
                            localStorage.setItem("background", setImage);
                        });
                    });


                    localStorage.todos = JSON.stringify(todo_list);


                    drawTodos();
                }
            }
        }
    }
}

然而这并没有奏效，我想不出办法来做到这一点。包含 '.done' 类的 'section' 标记也是使用 jquery 中的 id 生成的：

$.each(todo_list, function(id, todo) {
                todos = todos + '<section class="todo_item" id="item' + id + '"><span id="complete" class="palette complete">Complete</span><span id="incomplete" class="palette incomplete">Incomplete</span><span class="done">' + todo.name + '</span><a href="#" class="edit_todo"><img src="img/edit.png" alt="edit list item" /></a><a href="#" class="remove_todo"><img src="img/delete.png" alt="delete list item" /></a></section>';
            });

如何定位在“部分”中生成的 id，以便将其标记为完整？

4

1 回答 1

0

首先，看起来您将原始 HTML 存储在本地存储中。如果您想更多地操作它，最好将您的数据存储在一个对象（JSON，又名 JavaScript 对象表示法）中。

todo_list = {
  1 : "item 1",
  2 : "item 2"
};

如果要存储原始 HTML，则完全替换原始 html。

于 2013-02-27T17:46:09.177 回答