4-5节的对$delete_task进行console得不到老师的结果

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

建平226

2018-05-05

视频中老师进行

$delete_task = $('.action.detele');
console.log('$delete_task',$delete_task);

操作后得到了一串数据,但是我在chrome的console中length等于0.

整体的base.js如下:

;(function () {
'use strict' ;

/*这里约定将所有jquery的object前都加$*/
var $form_add_task = $('.add-task')
   ,$delete_task
   ,task_list = []/*最大的容器*/
   ;

   // console.log('$delete_task',$delete_task);

   init();

$form_add_task.on('submit',function (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);
   }
});

$delete_task.on('click',function () {
   console.log('1',1);

   var $this = $(this);
   var $item = $this.parent().parent();
   console.log('$item.data(index)',$item.data('index'));
   // 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();
}

function delete_task(index) {
   //如果没有index 或者index不存在则直接返回
   if(!index || !task_list[index]) return;

   delete  task_list[index];
   /* 更新localStorage*/
   refresh_task_list();
}

function init() {
   task_list = store.get('task_list') || [];
   if (task_list.length)
       render_task_list();
}

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.detele');
   console.log('$delete_task',$delete_task);
}

function  render_task_item(data, index) {
   /*这里定义了一个模版*/
   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回答

慕容9241538

2018-05-30

往后看看你就知道了,涉及到一个顺序的问题

0
0

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

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

1219 学习 · 161 问题

查看课程