質問: ai == aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
回答: ※動作確認してないが、このような感じだと思われる。 ``` $(function() { var $list = $('.todoList'); var $input = $('.todoInput'); var storage = window.localStorage; /* * Todoを追加する関数 */ function addTodo(text, isComplete) { // リストアイテムをつくる var $li = $(''); var $text = $('').text(text); var $checkbox = $(''); var $remove = $('削除'); $li.append($checkbox).append($text).append($remove); // 完了済みの場合の処理 if (isComplete) { $li.addClass('complete'); $checkbox.attr('checked', true); } // チェックボックスをクリックしたときの処理 $checkbox.click(function() { if ($(this).is(':checked')) { $li.addClass('complete'); } else { $li.removeClass('complete'); } updateStorage(); }); // 削除ボタンをクリックしたときの処理 $remove.click(function() { if (window.confirm('削除してよろしいですか?')) { $li.fadeOut(function() { $li.remove(); updateStorage(); }); } }); if(!duplicateCheck(text)){ // リストに追加する $list.append($li); } } /* * 重複チェック */ function duplicateCheck(text) { var duplicateFlag = false; $list.children().each(function(i, elem) { if($(elem).find(".text").text() === text){ duplicateFlag = true; return false; } }); return duplicateFlag; } /* * ストレージを更新する関数 */ function updateStorage() { var list = []; // 現在のリスト情報を全て取得する $list.find('li').each(function() { var $item = $(this); // テキストと完了かどうかを保存する list.push({ text: $item.find('.text').text(), complete: $item.hasClass('complete') }); }); // 文字列にしてストレージに保存 storage['todo.list'] = JSON.stringify(list); } // フォームを送信したときの処理 $('.todoForm').bind('submit', function(event) { // フォームのデフォルトの動作を止める event.preventDefault(); // テキストボックスに入っている文字列を取得 var text = $input.val(); // todoを追加 addTodo(text); // テキストボックスを空にする $input.val(''); // ストレージの更新 updateStorage(); }); // 初期表示時にストレージからデータを復元する処理 var storageList = storage['todo.list']; if (storageList) { JSON.parse(storageList).forEach(function(item) { addTodo(item.text, item.complete); }); } }); ```