## 新增刪除事項功能
~~~javascript
$(function(){
function lg(a){
console.log(a);
}
var $form_add_task = $('.add-task');
var $delete_task;
var task_list = undefined;
//加載默認數據
init();
$form_add_task.on('submit',on_add_task_form_submit);
function on_add_task_form_submit(e){
var new_task = {};
//禁用默認行為
e.preventDefault();
/*獲取新task的值*/
var $input = $(this).find('input[name=content]');
new_task.content = $input.val();
/*判空*/
if(!new_task.content) return;
console.log(new_task);
/*存入新task*/
/*var result = add_task(new_task);*/
if(add_task(new_task)){
/*aad_task方法中已經刷新過頁面*/
// render_task_list();
/*添加后把input清空*/
$input.val('');
}
}
/*刪除按鈕綁定監聽,在render task list中調用*/
function listen_task_delete(){
/* 刪除操作的監聽*/
$delete_task.on('click',function(){
/* 刪除需要索引，所以先取得索引值*/
var $this = $(this);
var $item = $this.parent().parent();
var index = $item.data('index');
var tmp = confirm('確定刪除嗎？');
tmp ? delete_task(index):null;
});
}
/*新增task方法*/
function add_task(new_task){
/*將Task推入task_list*/
task_list.push(new_task);
/*更新localStorage*/
// store.set('task_list',task_list);
refresh_task_list();
return true;
}
/*更新task_list方法*/
function refresh_task_list(){
store.set('task_list',task_list);
render_task_list();
}
/*刪除task方法*/
function delete_task(index){
/*如果沒有index或者在tasklist中不存在，直接返回 */
if(!index || !task_list[index]) return;
delete task_list[index];
refresh_task_list();
}
/*初始化數據方法*/
function init(){
/*沒有值就設置為空數組*/
task_list = store.get('task_list')||[];
if(task_list.length){
render_task_list();
}
lg(task_list);
}
/*把task-list渲染到頁面上*/
function render_task_list(){
/*tasklist容器*/
var $task_list = $('.task-list');
$task_list.html('');
/*循環遍歷tasklist*/
for(var i=0;i<task_list.length;i++){
var $task = render_task_item(task_list[i],i);
$task_list.append($task);
}
$delete_task = $('.action.delete');
listen_task_delete();
}
/*渲染單條*/
function render_task_item(data,index){
/*判空*/
if(!data||!index) return;
var list_item_tpl =
'<div class="task-item" data-index="'+index+'">'+
'<span><input type="checkbox"/></span>'+
'<span class="task-content">'+data.content+'</span>'+
'<span class="fr">'+
'<span class="action delete">刪除</span>'+
'<span class="action">詳細</span>'+
'</span>'+
'</div>';
return $(list_item_tpl);
}
});
~~~
