节点操作(记录更改)

来源：互联网发布：hadoop mac和linux 编辑：程序博客网时间：2024/04/19 01:39
<!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>
这里写图片描述
0 0