登录  /  注册

html给定标签选项并添加标签(附代码)

不言
发布: 2018-08-02 09:47:04
原创
3712人浏览过

这篇文章给大家介绍的内容是关于html给定标签选项并添加标签(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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";
}
登录后复制

JavaScript:

// 拥有的标签
    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);
 
    }
登录后复制

 相关文章推荐:

HTML实现获取浏览器可视区域宽高(纯代码)

html实现图片预加载的分析(附代码)

以上就是html给定标签选项并添加标签(附代码)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号