TAG添加标签 做了个方法方便调用
一、JS版本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建元素</title> <script> window.onload = function() { function addTags(iput, btn, ul, number) { var ainput = document.getElementById(iput); var aBtn = document.getElementById(btn); var Oul = document.getElementById(ul); var n = number; var n = 4; var arrs = []; if (typeof(number) == "undefined") { n = 4; } else { n = number; } aBtn.onclick = function() { var newLi = document.createElement('li'); var aLi = Oul.getElementsByTagName('li'); //选中所有LI newLi.innerHTML = '<span>' + ainput.value + '</span>' + '<a href="javascript:;" class="del">删除</a>'; newLi.className = "classname"; //判断数组中是否存在的方法 Array.prototype.S = String.fromCharCode(2); Array.prototype.in_array = function(e) { var r = new RegExp(this.S + e + this.S); return (r.test(this.S + this.join(this.S) + this.S)); }; //先判断是否存在，再进行操作 if (arrs.in_array(ainput.value) /*有重复返回ture*/ ) { alert("有重复了"); } else if (arrs.length > n - 1) { alert('最多' + n + '个'); } else { arrs.push(ainput.value); //添加到数组 Oul.appendChild(newLi); //创建元素 }; delLi(btnA); //删除的方法 ainput.value = ""; //清空input } var btnA = Oul.getElementsByTagName("a"); //删除标签方法 function delLi(e) { for (var i = 0; i < btnA.length; i++) { e[i].onclick = function() { var x = arrs.indexOf(text(this.previousSibling)); //获取兄弟节点的值 Oul.removeChild(this.parentNode); arrs.splice(x, 1); } } }; //indexof（）兼容写法 if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(ele) { // 获取数组长度 var len = this.length; // 检查值为数字的第二个参数是否存在，默认值为0 var fromIndex = Number(arguments[1]) || 0; // 当第二个参数小于0时，为倒序查找，相当于查找索引值为该索引加上数组长度后的值 if (fromIndex < 0) { fromIndex += len; } // 从fromIndex起循环数组 while (fromIndex < len) { // 检查fromIndex是否存在且对应的数组元素是否等于ele if (fromIndex in this && this[fromIndex] === ele) { return fromIndex; } fromIndex++; } // 当数组长度为0时返回不存在的信号：-1 if (len === 0) { return -1; } } } //兼容浏览器获取节点文本的方法 function text(e) { var t = ""; //如果传入的是元素，则继续遍历其子元素 //否则假定它是一个数组 e = e.childNodes || e; //遍历所有子节点 for (var j = 0; j < e.length; j++) { //如果不是元素，追加其文本值 //否则，递归遍历所有元素的子节点 t += e[j].nodeType != 1 ? e[j].nodeValue : text(e[j].childNodes); } //返回区配的文本 return t; } }; addTags("Input", "Btn", "Oul"); addTags("Input1", "Btn1", "Oul1", 5); } </script> </head> <body> <input type="text" value="" id="Input"> <input type="button" value="添加" id="Btn"> <ul id="Oul"></ul> <div style="height: 10px; background-color: #000;"></div> <input type="text" value="" id="Input1"> <input type="button" value="添加" id="Btn1"> <ul id="Oul1"></ul> </body> </html>
二、JQUERY版本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery.tag</title> <script src="http://www.xybsyw.com/jquery/jquery.min.js"></script> </head> <body> <script> $(function() { //添加tag方法 function addTags(iput, btn, ul, number) { var ainput = $('#' + iput); var aBtn = $('#' + btn); var Oul = $('#' + ul); var n = number; var n = 4; //默认最多添加4个 var arrs = []; //tag存在数组中 //假如没有传number限制个数默认为4个 if (typeof(number) == "undefined") { n = 4; } else { n = number; } aBtn.click(function() { var newLi = $('<li><span>' + ainput.val() + '</span><a href="javascript:;" class="del">删除</a></li>'); if (arrs.length >= n) { alert('最多' + n + '个'); //return; } else { if ($.inArray(ainput.val(), arrs) == -1 && ainput.val() !== "") { arrs.push(ainput.val()); //添加到数组 newLi.appendTo(Oul); } else if (ainput.val() == "") { alert("不能为空"); } else { alert("有重复了"); }; } ainput.val(""); //清空input var delBtn = Oul.find("li").find("a.del"); //删除标签方法 function delLi(e) { for (var i = 0; i < delBtn.length; i++) { //循环出所有的a e[i].onclick = function() { var x = arrs.indexOf($(this).parent().find("span").text()); //获取兄弟节点的值 $(this).parent().remove(); arrs.splice(x, 1); } }
//解决Indexof在IE78中不能使用
if (!Array.indexOf) {
Array.prototype.indexOf = function(obj) {
for (var i = 0; i < this.length; i++) {
if (this[i] == obj) {
return i;
}
}
return -1;
}
}
}; delLi(delBtn); }); }; //使用addTag方法 addTags("Input", "Btn", "Oul"); addTags("Input1", "Btn1", "Oul1", 5); }) </script> //////////////////////第一个////////////////////////// <br> <input type="text" value="" id="Input"> <input type="button" value="添加" id="Btn"> <ul id="Oul"></ul> <br> //////////////////////第二个////////////////////////// <br> <input type="text" value="" id="Input1"> <input type="button" value="添加" id="Btn1"> <ul id="Oul1"></ul> </body> </html>