时间:2021-05-25
先看看效果图:
代码实现:
HTML代码:
<h3>haveTags</h3><div id="havetags"></div><hr /><h3>addTags</h3><div id="addtags"></div><button id="btn">返回的数组</button>css代码:
#havetags span,#addtags span { display: inline-block; padding: 0 0 0 10px; margin: 2px 5px; border: 1px solid #000;} #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 += "<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); } /** * 添加标签 * @param {[String]} haveTagsId [展示拥有标签的HTML标签Id] * @param {[String]} addTagsId [展示添加标签的HTML标签Id] * @param {[Array]} haveTags [拥有标签的数组] * @param {[Array]} 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); } } } /** * 删除标签 * @param {[String]} haveTagsId [展示拥有标签的HTML标签Id] * @param {[String]} addTagsId [展示添加标签的HTML标签Id] * @param {[Array]} haveTags [拥有标签的数组] * @param {[Array]} 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); }以上就是JavaScript如何实现添加给定的标签选项?(代码实例)的详细内容,更多请关注php中文网其它相关文章!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Javascript计算器:系列文章:JS实现计算器详解及实例代码(一)Javascript实现计算器时间功能详解及实例(二)Javascript计算器->添加
第一页:JavaScript数据类型详解第二页:JavaScript数据类型详解第三页:JavaScript数据类型详解 数据类型 JavaScript中有
动态载入JavaScript/Csss文件传统加载外部JavaScript(*.js)或者Css(*.css)文件的方法是直接在标签里面进行添加:复制代码代码如
本文实例讲述了javascript通过获取html标签属性class实现多选项卡的方法。分享给大家供大家参考。具体实现方法如下:原生javascript通过获取
本文实例讲述了AngularJS实现标签页tab选项卡功能。分享给大家供大家参考,具体如下:选项卡一:JavaScript+html+css/libs/angu