功能说明
- 在文本框输入内容，点击增加按钮，则下方的列表会增加添加项
- 点击删除按钮，则删除该项
- 点击向下箭头，位置顺序就往下调整
- 点击向上箭头，位置顺序就往上调整
首先实现基本HTML+CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.todolist_con{
width: 300px;
height: 100%;
/*background: gold;*/
margin: 50px auto 0;
padding: 10px;
}
.todolist_con h2{
margin: 10px;
}
.todolist_con ul{
list-style: none;
}
.todolist_con ul li{
margin: 10px;
position: relative;
border-bottom: 2px solid #ccc;
}
.todolist_con ul li a{
position: absolute;
}
.todolist_con ul li .delete{
right: 50px;
}
.todolist_con ul li .down{
right: 30px;
}
.todolist_con ul li .up{
right: 10px;
}
.todolist_con .txt{
margin-left: 11px;
}
</style>
</head>
<body>
<!-- div.todolist_con>h2{To do list}+input.txt+input -->
<div class="todolist_con">
<h2>To do list</h2>
<input type="text" class="txt">
<input type="button" value="增加" class="add">
<!-- ul>li{学习html}>a{删除}+a{👇}+a{👆} -->
<ul>
<li>学习html
<a href="javascript:;" class="delete">删除</a>
<a href="javascript:;" class="down">👇</a>
<a href="javascript:;" class="up">👆</a>
</li>
<li>学习css
<a href="javascript:;" class="delete">删除</a>
<a href="javascript:;" class="down">👇</a>
<a href="javascript:;" class="up">👆</a>
</li>
<li>学习javascript
<a href="javascript:;" class="delete">删除</a>
<a href="javascript:;" class="down">👇</a>
<a href="javascript:;" class="up">👆</a>
</li>
</ul>
</div>
</body>
</html>
在文本框输入内容，点击增加按钮，则下方的列表会增加添加项
<script type="text/javascript">
$(function(){
$('.add').click(function(){
var $content = $('.txt').val();
if ($content == "") {
alert("输入内容不能为空");
return;
}
// console.log($content);
// 当content内容不为空，那么则可以新增一个节点
var $li = ' \
<li>' + $content + ' \
<a href="javascript:;" class="del">删除</a> \
<a href="javascript:;" class="down">👇</a> \
<a href="javascript:;" class="up">👆</a> \
</li> \
'
// console.log($li);
$("ul").append($li);
})
})
</script>
点击删除按钮，则删除该项
// 删除元素
$(".del").click(function(){
// alert('click del');
$(this).parent().remove();
})
但是这种写法存在一个问题，就是新增加的li标签是无法删除的。这种情况就需要才用事件委托给ul来处理比较好了。
使用事件委托的方式，解决新增li标签无法删除的问题
从上面的四个图可以看出，事件委托已经监听成功，就算是新增的li标签内的a元素都可以监听到。
并且可以获取点击a的class属性。
那么下面就可以根据这个class属性进行判断是点击哪个，然后进行相应的操作即可。
首先编写删除的操作。
点击向下箭头，位置顺序就往下调整
向下的则是将当前的li设置在next() li标签的后面即可。
点击向下就向下了。
点击向上箭头，位置顺序向上调整
但是向上和向下都有点缺陷，就是没有限制到顶部或者到底部的处理事项。
设置到顶部和到底部的事项
完整代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('.add').click(function(){
var $content = $('.txt').val();
if ($content == "") {
alert("输入内容不能为空");
return;
}
// console.log($content);
// 当content内容不为空，那么则可以新增一个节点
var $li = ' \
<li>' + $content + ' \
<a href="javascript:;" class="del">删除</a> \
<a href="javascript:;" class="down">👇</a> \
<a href="javascript:;" class="up">👆</a> \
</li> \
'
// console.log($li);
$("ul").append($li);
})
// 删除元素
// $(".del").click(function(){
// // alert('click del');
// $(this).parent().remove();
// })
$('.todolist_con ul').delegate('a','click',function(){
// alert($(this).prop('class'));
var $handler = $(this).prop('class');
if ($handler=="del") {
$(this).parent().remove();
}
if ($handler=="down") {
if ($(this).parent().next().length==0) {
alert('到底部了！')
return;
}
$(this).parent().insertAfter($(this).parent().next());
}
if ($handler=="up") {
if ($(this).parent().prev().length==0) {
alert('到顶部了！')
return;
}
$(this).parent().insertBefore($(this).parent().prev());
}
})
})
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.todolist_con{
width: 300px;
height: 100%;
/*background: gold;*/
margin: 50px auto 0;
padding: 10px;
}
.todolist_con h2{
margin: 10px;
}
.todolist_con ul{
list-style: none;
}
.todolist_con ul li{
margin: 10px;
position: relative;
border-bottom: 2px solid #ccc;
}
.todolist_con ul li a{
position: absolute;
}
.todolist_con ul li .del{
right: 50px;
}
.todolist_con ul li .down{
right: 30px;
}
.todolist_con ul li .up{
right: 10px;
}
.todolist_con .txt{
margin-left: 11px;
}
</style>
</head>
<body>
<!-- div.todolist_con>h2{To do list}+input.txt+input -->
<div class="todolist_con">
<h2>To do list</h2>
<input type="text" class="txt">
<input type="button" value="增加" class="add">
<!-- ul>li{学习html}>a{删除}+a{👇}+a{👆} -->
<ul>
<li>学习html
<a href="javascript:;" class="del">删除</a>
<a href="javascript:;" class="down">👇</a>
<a href="javascript:;" class="up">👆</a>
</li>
<li>学习css
<a href="javascript:;" class="del">删除</a>
<a href="javascript:;" class="down">👇</a>
<a href="javascript:;" class="up">👆</a>
</li>
<li>学习javascript
<a href="javascript:;" class="del">删除</a>
<a href="javascript:;" class="down">👇</a>
<a href="javascript:;" class="up">👆</a>
</li>
</ul>
</div>
</body>
</html>
网友评论