和老师敲的感觉一样但是删除还是运行不了,不知道哪儿错了。

来源:4-5 删除Task(2)

周小诺诺诺诺诺好吖好吖

2017-04-04

;(function () {
   'use strict';

   var $form_add_task = $('.add-task')
       , $delete_task
       , task_list = []
       ;
   console.log('$delete_task',$delete_task);

   init();

   $form_add_task.on('submit',on_add_task_form_submit);

   function on_add_task_form_submit(e) {
       var new_task = {},$input;
       /*禁用默认行为*/
       e.preventDefault();
       /*获取新Task的值*/
       $input=$(this).find('input[name=content]');
       new_task.content = $input.val();
       /*如果新Task的值为空 则直接返回 否则提取执行*/
       if (!new_task.content) return;
       /*存入新Task*/
       if(add_task(new_task)){
           //render_task_list();
           $input.val(null);
       }
   }

   /*查找并监听所有删除按钮的点击事件*/
   function listen_task_delete() {
       $delete_task.on('click',function () {
           var $this = $(this);
           /*找到删除按钮所在的Task元素*/
           var $item = $this.parent().parent();
           var index = $item.data('index');
           /*确认删除*/
           var tmp = confirm('确定删除?');
           tmp ? delete_task(index) : null;
       })
   }

   
   function add_task(new_task) {
       /*将新Task推入task_list*/
       task_list.push(new_task);
       /*更新LocalStorage*/
       refresh_task_list();
       return true;
   }

   /*
    *刷新LocalStorage数据并渲染模板(tpl)
    * */
   function refresh_task_list() {
       store.set('task_list',task_list);
       render_task_list();
   }

   /*删除一条Task*/
   function delete_task(index) {
       /*如果没有index 或者index不存在则直接返回*/
       if (index === undefined || !task_list [index]) return;

       delete task_list[index];
       console.log('task_list',task_list);

       /*更新LocalStorage*/
       refresh_task_list();
   }

   function init() {
       task_list = store.get('task_list') || [];
       if (task_list.length)
           render_task_list();
   }
   /*
    * 渲染全部的Task模板
    * */
   function render_task_list() {
       var $task_list = $('.task-list');
       $task_list.html('');
       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();
   }
   /*
    *渲染单条Task模板
    * */
   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);
   }
})();

写回答

1回答

原承天

2017-04-07

在删除哪里看看index是什么类型(用chrome调试工具) 如果是字符串类型,用index=parseInt(index);转型下

0
1
周小诺诺诺诺诺好吖好吖
非常感谢!
2017-04-13
共1条回复

6小时 jQuery开发一个前端应用

搭建一个清单应用,一次性掌握jQuery核心功能和使用技巧

1219 学习 · 161 问题

查看课程