详解JavaScript添加给定的标签选项

前端之家收集整理的这篇文章主要介绍了详解JavaScript添加给定的标签选项前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先看看效果图:

代码实现:

HTML代码

haveTags

addTags

css代码

havetags span::after,#addtags span::after {

content: "+";
display: inline-block;
padding: 0 10px;
background-color: #00ffff;
margin-left: 5px;
}

addtags span::after {

content: "x";
}

js代码

标签 var haveArr = ["HTML","CSS","JavaScript","jQuery","Vue","Bootstrap"];

// 添加标签
var addArr = ["PHP","MysqL"];

/**

  • [tagsShow 展示拥有的标签]
  • @param {[String]} haveTagsId [展示拥有标签的HTML标签Id]
  • @param {[String]} addTagsId [展示添加标签的HTML标签Id]
  • @param {[Array]} haveTags [拥有标签的数组]
  • @param {[Array]} addTags [添加标签的数组]
    */
    function tagsShow(haveTagsId,addTagsId,haveTags,addTags) {

for(var i = 0; i < haveTags.length; i++) {

document.getElementById(haveTagsId).innerHTML += "" + haveTags[i] + "";

}

addTag(haveTagsId,haveArr,addArr);

for(var i = 0; i < addTags.length; i++) {

document.getElementById(addTagsId).innerHTML += "" + addTags[i] + "";

}

delTag(haveTagsId,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 += "" + this.innerHTML + "";

haveTags.splice(haveTags.indexOf(this.innerHTML),1); // 从数组中删除该元素

delTag(haveTagsId,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 += "" + this.innerHTML + "";

addTags.splice(addTags.indexOf(this.innerHTML),1); // 从数组中删除该元素

addTag(haveTagsId,addTags);

}

}

}

// 展示标签
tagsShow('havetags','addtags',addArr);

// 最终数组
document.getElementById("btn").onclick = function() {

console.log(haveArr);

console.log(addArr);

}

以上就是JavaScript如何实现添加给定的标签选项?(代码实例)的详细内容,更多请关注PHP中文网其它相关文章

原文链接:https://www.f2er.com/js/30153.html

猜你在找的JavaScript相关文章