-
Duang～2018-10-24 00:00
- 35
- 0
emmm这仍然是todolist 的部分代码，在网页打开后要删除task的时候点删除没有反应，我在on click事件里面写了console.log()也没有反应
在只先定义$delete_task后在render_task_list()里写$delete_task = $('.action.delete') 的话会报错，显示typeerror , delete_task undefined
目前全部的代码在这里链接描述
这个是html的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Todo App</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/base1.css">
</head>
<body>
<div class="container"><!-- 总容器开始 -->
<h1>我的ToDo</h1>
<form class="add-task">
<input name="content"
type="text"
placeholder="e.g. 下午记得买菜"
autofocus
autocomplete="off"
>
<button type="submit" class="submit-task">submit</button>
</form>
<div class="tasks-list"><!-- 清单列表开始 -->
<!-- <div class="task-item"> -->
<!-- <span><input type="checkbox"></span> -->
<!-- <span class="task-content">item content 1</span> -->
<!-- <span>delete</span> -->
<!-- <span>detail</span> -->
<!-- </div> -->
</div> <!-- 清单列表结束 -->
<div class="task-detail-mask"></div>
<div class="task-detail"><!-- 任务详情开始 -->
<div class="content"><!-- 任务标题开始 -->
下午记得买菜
</div> <!-- 任务标题结束 -->
<div><!-- 任务描述开始 -->
<div class="desc">
<textarea id=""></textarea>
</div>
</div><!-- 任务描述结束 -->
<div class="remaind"><!--任务定时提醒开始-->
<input type="date">
<!-- <button type="submit">submit</button> -->
</div><!-- 任务定时提醒结束 -->
</div><!-- 任务详情结束 -->
</div><!-- 总容器结束 -->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="node_modules/store/store.js"></script>
<script type="text/javascript" src="js/jsbase.js"></script>
</body>
</html>JS代码
;(function () {
'use strict';
var $submit_task = $('.submit-task')
, $delete_task = $('.action.delete')
, task_list =[]
;
init();
$submit_task.on('click',function(e){
var new_task = {};
// 禁用默认行为
e.preventDefault();
// 获取新task的值
var $input = $(this).prev(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'));
})
function add_task(new_task){
//将新task推入tasklist
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= $('.tasks-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);
}
}
function render_task_item(data,index){
var list_item_item =
'<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_item);
}
})();0
打赏
收藏
点击回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部