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>