利用Jqurey写一个输入内容增加并且可以删除，上下移动的标签

最终结果如下，输入内容增加标签并且可以删除，上下移动：

代码赏析：

<!DOCTYPE html>

<head>

<title>todolist</title>

.list_con{

width:600px;

margin:50pxauto 0;

}

.inputtxt{

width:550px;

height:30px;

border:1pxsolid #ccc;

padding:0px;

text-indent:10px;

}

.inputbtn{

width:40px;

height:32px;

padding:0px;

border:1pxsolid #ccc;

}

.list{

margin:0;

padding:0;

list-style:none;

margin-top:20px;

}

.list li{

height:40px;

line-height:40px;

border-bottom:1pxsolid #ccc;

}

.list li span{

float:left;

}

.list li a{

float:right;

text-decoration:none;

margin:010px;

}

</style>

$(function(){

// 1.获取元素

var $inputTxt = $("#txt1");

var $addBtn = $("#btn1");

var $list = $("#list");

// 按钮点击事件

$addBtn.click(function(){

// 2.判断是否为空

var sContent = $inputTxt.val();

if(sContent == ""){

alert("请输入内容");

return;

}

// 3.将新增的内容添加到列表

// ul 加 li 内部增加

var sNewContent = $('<li><span>'+ sContent +'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');

$list.append(sNewContent);

// 清空输入框

$inputTxt.val("");

})

// 4.删除上移动下移动

$list.delegate("a","click",function(){

// 根据class 的名称判断到底是哪一个按钮

var sClassName = $(this).prop("class");

// 根据按钮做出选择

if(sClassName =="del"){//删除

$(this).parent().remove();

}else if(sClassName =="up"){//上移动

// 父元素

var $currentLi = $(this).parent();

// 前元素

var $preLi = $currentLi.prev();

// 5.判断到头和到尾

if($preLi.length == 0){

alert("到顶了");

return;

}

// 交换位置

$currentLi.insertBefore($preLi);

}else if(sClassName =="down"){//向下

// 父元素

var $currentLi = $(this).parent();

// 前元素

var $preLi = $currentLi.next();

// 5.判断到头和到尾

if($preLi.length == 0){

alert("到底了");

return;

}

// 交换位置

$currentLi.insertAfter($preLi);

}

})

</script>

</head>

<body>

<li><span>学习html</span><ahref="javascript:;"class="up"> ↑</a><a href="javascript:;"class="down"> ↓</a><a href="javascript:;"class="del">删除</a></li>

<li><span>学习css</span><ahref="javascript:;"class="up"> ↑</a><a href="javascript:;"class="down"> ↓</a><a href="javascript:;"class="del">删除</a></li>

<li><span>学习javascript</span><ahref="javascript:;"class="up"> ↑</a><a href="javascript:;"class="down"> ↓</a><a href="javascript:;"class="del">删除</a></li>

</ul>

</div>

</body>

</html>

利用Jqurey写一个输入内容增加并且可以删除，上下移动的标签相关推荐

python抽奖游戏_利用Python写一个抽奖程序，解密游戏内抽奖的秘密
原标题:利用Python写一个抽奖程序,解密游戏内抽奖的秘密前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 极客 ...
利用Flutter写一个跨平台的果核APP（4）——数据存储
前言目前我们已经实现了几个界面,今天这篇文章开始着手进行登录页的制作,主要流程就是获取输入框中的内容,发送给后台进行验证,如果成功将返回信息保存在本地并跳转至首页,如果失败就提示用户重新输入. 在这 ...
利用itchat写一个聊天机器人
利用itchat写一个聊天机器人聊天机器人图灵机器人需要的库 **自动回复私聊消息** **自动回复群聊消息** 结语: 聊天机器人偶然在CSDN上看到大佬用20行教你写一个聊天机器人,觉得甚 ...
学了C语言，如何利用CURL写一个下载程序？—用nmake编译CURL并安装
在这一系列的前一篇文章学了C语言,如何为下载狂人写一个磁盘剩余容量监控程序?中,我们为下载狂人写了一个程序来监视磁盘的剩余容量,防止下载的东西撑爆了硬盘.可是,这两天,他又抱怨他的下载程序不好用,让我 ...
利用python写一个简单的双色球彩票系统
利用python写一个简单的双色球彩票系统 1.设置每次买的号码一样写一个双色球彩票系统,系统可以随机产生一组数据,一组彩票数据有六位数,这六位数的的取值范围是0和1. 一张彩票是两块钱,用户可以选 ...
【c语言写计算器】利用函数写一个计算器包括菜单功能和加减乘除四个功能
/*利用函数写一个计算器包括菜单功能和加减乘除四个功能作者:NBDR_YL*/ #include<stdio.h>int mean(void); //声明菜单的函数 float add ...
利用Cocos2d-x写一个程序读取传奇wzl文件
Cocos2d-x是一个用于游戏开发的开源框架,它提供了用于制作2D游戏的工具和功能.若要利用Cocos2d-x读取传奇wzl文件,需要对wzl文件的格式进行分析,并使用Cocos2d-x提供的读取文 ...
写一个输入圆半径r，计算圆面积S和圆周长L的程序。
题目描述写一个输入圆半径r,计算圆面积S和圆周长L的程序. 要求程序有判断圆半径r是否大于零的功能,半径r大于零时才计算并输出结果(保留两位小数),否则的话不计算,输出-1.圆周率取3.14. 输入 ...
利用Flutter写一个跨平台的果核APP（0）——介绍
前言今年2月的时候,Google在开发者大会上推出了flutter的第一个预览版,我是在3月左右的时候才了解到这个全新的跨平台框架,并在阅读了相关文档之后写了一篇<你好,Flutter> ...

利用Jqurey写一个输入内容增加并且可以删除，上下移动的标签

利用Jqurey写一个输入内容增加并且可以删除，上下移动的标签相关推荐

最新文章

热门文章