// 拥有的标签
var haveArr = [
"HTML"
,
"CSS"
,
"JavaScript"
,
"jQuery"
,
"Vue"
,
"Bootstrap"
];
// 添加的标签
var addArr = [
"PHP"
,
"MySQL"
];
function tagsShow(haveTagsId, addTagsId, haveTags, addTags) {
for (var i =
0
; i < haveTags.length; i++) {
document.getElementById(haveTagsId).innerHTML +=
"<span>"
+ haveTags[i] +
"</span>"
;
}
addTag(haveTagsId, addTagsId, haveArr, addArr);
for (var i =
0
; i < addTags.length; i++) {
document.getElementById(addTagsId).innerHTML +=
"<span>"
+ addTags[i] +
"</span>"
;
}
delTag(haveTagsId, addTagsId, haveTags, addTags);
}
function addTag(haveTagsId, addTagsId, haveTags, addTags) {
var len = document.getElementById(haveTagsId).children.length;
for (var i =
0
; i < len; i++) {
document.getElementById(haveTagsId).children[i].onclick = function() {
this.remove();
addTags.push(this.innerHTML);
document.getElementById(addTagsId).innerHTML +=
"<span>"
+ this.innerHTML +
"</span>"
;
haveTags.splice(haveTags.indexOf(this.innerHTML),
1
); // 从数组中删除该元素
delTag(haveTagsId, addTagsId, haveTags, addTags);
}
}
}
function delTag(haveTagsId, addTagsId, haveTags, addTags) {
var len = document.getElementById(addTagsId).children.length;
for (var i =
0
; i < len; i++) {
document.getElementById(addTagsId).children[i].onclick = function() {
this.remove();
haveTags.push(this.innerHTML);
document.getElementById(haveTagsId).innerHTML +=
"<span>"
+ this.innerHTML +
"</span>"
;
addTags.splice(addTags.indexOf(this.innerHTML),
1
); // 从数组中删除该元素
addTag(haveTagsId, addTagsId, haveTags, addTags);
}
}
}
// 展示标签
tagsShow(
'havetags'
,
'addtags'
, haveArr, addArr);
// 最终数组
document.getElementById(
"btn"
).onclick = function(){
console.log(haveArr);
console.log(addArr);
}