<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8"?/>
<meta?http-equiv="X-UA-Compatible"?content="IE=edge"?/>
<meta?name="viewport"?content="width=device-width,?initial-scale=1"?/>
<title>demo-jQuery</title>
<link?href="./../../_libs/bootstrap/css/bootstrap.css"?rel="stylesheet">
<link?href="./../../_libs/animate/animate.css"?rel="stylesheet">
</head>
<body>
<div>
<div>
<div>
<form?action=""?id="todoForm">
<lable?for="">將下面輸入的文字放入todo?list中!</lable>
<input?type="text"?id="todoInput">
</form>
<p?id="todoCount"></p>
<ol?id="todoList"></ol>
</div>
</div>
</div>
<script?src="./../../_libs/jQuery/jquery-3.1.0.js"></script>
<script?src="./../../_libs/jQuery/jquery-migrate-3.0.0.js"></script>
<script?src="./../../_libs/bootstrap/js/bootstrap.js"></script>
<!--?<script?src="https://cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2-all-testing.umd.dev.js"></script>?-->
<script>
$(function(){
let?$todoForm?=?$('#todoForm');
let?$todoInput?=?$('#todoInput');
let?$todoList?=?$('#todoList');
let?$todoCount?=?$('#todoCount');
$todoForm.on('submit',?function(e)?{
e.preventDefault();
let?input_value?=?$todoInput.val();
console.log(input_value);
$todoList.append('<li>'?+input_value+?' <a?href="javascript:;">X</a></li>');
$todoInput.val('');
get_total();
});
$todoList.on('click',?'.todoDelete',?function(e)?{
//?這里是事件代理
e.preventDefault();
$(this).parent().remove();
get_total();
});
function?get_total()?{
let?len?=?$todoList.children('li').length;
$todoCount.html(len?>?0???'現有'?+len+?'項?todo?list;'?:?'');
}
});
</script>
</body>
</html>
2017-07-26
不知道問題是什么