私はやることリストを作ろうとしてきましたが、これまでのところ追加と削除が機能しています。アイテムを完了としてマークするセクションを追加する必要があるため、好きなようにうまく機能するコードを取得しました。コードを試すときは常に別のファイルで作業しようとしているので、それが機能するようになったときに、それを to-do ファイルに転送しようとしましたが、現在は機能していません。それが機能しない理由は、アイテム 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をターゲットにして、完了としてマークするにはどうすればよいですか?