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回答
-
往后看看你就知道了,涉及到一个顺序的问题
00
相似问题