节点操作(记录更改)

最新推荐文章于 2023-08-26 20:46:50 发布
翻译最新推荐文章于 2023-08-26 20:46:50 发布 · 369 阅读
5 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;color: #333}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";background:-webkit-linear-gradient(#8bc1de,#F9A886) no-repeat; -webkit-user-select: none}
        .wrap{width: 1000px;margin: 30px auto}
        .left{width: 400px;height:350px;background: #fff;float: left;padding: 100px 50px;}
        .left .tagbox{height: 50px;}
        .left .tagbox a:hover{color: #F20F70}
        .left .tags{color:#F5A63A;font-size: 16px;}
        .items{padding:5px 7px;border:1px solid #999;margin-left:5px;white-space:nowrap}
        .col{color: #fff;}
        .items a{display:inline-block;width: 12px;height: 15px;border-left:1px solid #888;margin-left:5px;font-size:12px;padding-left: 10px;}

        .right{width: 400px;height:350px;background: #3c3837;background: rgba(0,0,0,.5);float: right;padding: 100px 50px;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left">
            <div class="tagbox">
                <span class='tags'>热门目的地:</span>
                <span id="tagwrap">
                    <a href="javascript:void(0)">马来西亚</a>
                    <a href="javascript:void(0)">泰国</a>
                    <a href="javascript:void(0)">三亚</a>
                    <a href="javascript:void(0)">新西兰</a>
                    <a href="javascript:void(0)">云南</a>
                </span>
            </div>
            <div class="target" id="leftarget">
               <!--  <span class="items">
                    <i>长沙</i>
                    <a href="javascript:void(0)" onclick="remove(this)">X</a>
                </span> -->
            </div>
        </div>
        <div class="right">
            <div class="target" id="righttarget">
               <!--  <span class="items col">
                    <i>长沙</i>
                </span> -->
            </div>
        </div>
    </div>
    <script type="text/javascript">
        /*
            两边同时添加
            不可以重复添加
            左边删除右边也要删除
         */
        var tagwrapDom = document.getElementById("tagwrap").children;
        var leftargetDom = document.getElementById("leftarget");
        var righttargetDom = document.getElementById("righttarget");
        var arr = [];
        for(var i=0;i<tagwrapDom.length;i++){
            tagwrapDom[i].onclick = function(){
                var text = this.innerHTML;
                // 去重
                if(arr.indexOf(text) == -1){
                    // 标签内不能留空格.
                    leftargetDom.innerHTML += "<span class='items'><i>"+text+"</i><a href='javascript:void(0)' onclick='remove(this)'>X</a></span>";
                    arr.push(text);
                    righttargetDom.innerHTML += "<span class='items col'><i>"+text+"</i></span>";
                };
            };
        };

        function remove(obj){
            var spanDom = obj.parentNode;
            var text = spanDom.innerText;
            var rightDom = document.getElementById("righttarget");
            text = text.slice(0,text.length-1);//重新赋值
            arr.splice(arr.indexOf(text),1); //把记录也删掉
            spanDom.parentNode.removeChild(spanDom);
            // 右边同步下
            var rightDomList = rightDom.children;
            for(var i=0;i < rightDomList.length;i++){
                // var t = rightDomList[i].innerText;
                if( rightDomList[i].innerText == text){
                    rightDom.removeChild(rightDomList[i]);
                    // 删一个退出循环.
                    break;
                };
            }

        }
    </script>
</body>
</html>