Home  >  Article  >  Web Front-end  >  How to add a given label option in JavaScript? (code example)

How to add a given label option in JavaScript? (code example)

青灯夜游
青灯夜游Original
2018-09-15 17:51:151511browse

This chapter will introduce how to use tag JavaScript to add a given tag option? (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Let’s take a look at the renderings first:

How to add a given label option in JavaScript? (code example)

Code implementation:

HTML code:

<h3>haveTags</h3>
<div id="havetags"></div>
<hr />
<h3>addTags</h3>
<div id="addtags"></div>
<button id="btn">返回的数组</button>

css Code:

#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 code:

// 拥有的标签
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(&#39;havetags&#39;, &#39;addtags&#39;, haveArr, addArr);

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

	console.log(haveArr);

	console.log(addArr);

}











The above is the detailed content of How to add a given label option in JavaScript? (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn