js点击文字将文字显示到对应区域_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

js点击文字将文字显示到对应区域

来源：未知作者：类型：图文教程点击次数：发布时间：2017-02-16 16:39:47

我爱模板网做的一个小功能，非常简单，点击列表的时候，将列表中的文字添加到头像的后面。并且，添加上去的文字可以删除。如果列表中的文字已经出现在上面，则再次点击，不会再将文字放上去，当点击删除按钮后，再点击列表，文字又会被添加到头像后面。基于jquery写的。大神请跳过！

效果图：

运行下面的代码查看效果：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js点击文字将文字显示到对应区域 - 我爱模板网 www.5imoban.net</title> <style> li{list-style:none; width:50px; margin:5px; cursor:pointer; text-align:center; padding:5px; background:#B7DBF9;} span{display:inline-block; height:25px; line-height:25px; vertical-align:top;} b{font-weight:normal; position:relative; margin-right:15px; border:1px solid #ccc; padding:0 10px;} i{font-style:normal; position:absolute; font-size:12px; right:-10px; top:-10px; cursor:pointer; border:1px solid #999; background:#fff; border-radius:9999px; display:block; width:15px; height:15px; line-height:15px; text-align:center;} </style> </head> <body> <img src="http://www.5imoban.net/view/demoimg/testAvatar.jpg"><span></span> <ul> <li>张三</li> <li>李四</li> <li>王二</li> <li>麻子</li> <li>伟平</li> </ul> <script src="http://www.5imoban.net/tpl/js/jquery-1.8.3.min.js"></script> <script> $(function(){ $("ul li").each(function(index) { $(this).click(function(){ if($(this).attr("biaoji") != "已经点过了！"){ var _html = $("span").html(); _html += "<b data-n='"+index+"'>"+$(this).html()+"<i>X</i></b>"; $("span").html(_html); $(this).attr("biaoji","已经点过了！"); $("span i").click(function(){ var i = $(this).parent().data("n"); $(this).parent().remove(); $("ul li").eq(i).removeAttr("biaoji"); }) } }) }); }) </script> </body> </html
提示：您可以先修改部分代码再运行