panel切换

Html

Css

    .box {
	display:flex;
}
.panel {
	margin:0 3%;
	border:1px solid #ddd;
	width:20%;
	cursor:pointer;
	text-align:center;
	height:400px;
	overflow-y:auto;
}
.panel_detail {
	border-bottom:1px solid #ddd;
	padding:5% 0;
	background:transparent;
	transition:background .15s ease-in-out;
}
.panel_detail.clk {
	background:lightblue;
}
.panel_detail:hover {
	/* color:#fff;
	*/
      background:lightblue;
}
ul,li {
	padding:0;
}
li {
	list-style:none;
}
.hide {
	display:none;
}
.exchangeCn {
	align-self:center;
}
.exchangeCn li {
	cursor:pointer;
	border:1px solid #ddd;
	padding:5px 10px;
	margin:5px 0;
}

var list1 = [{
           "id": 1,
           "inner": "a",
           "code": 'ars'
       },
       {
           "id": 2,
           "inner": "b",
           "code": "back"
       },
       {
           "id": 3,
           "inner": "c",
           "code": "caption"
       },
       {
           "id": 3,
           "inner": "d",
           "code": "drive"
       },
       {
           "id": 3,
           "inner": "e",
           "code": "egg"
       },
       {
           "id": 3,
           "inner": "f",
           "code": "fly"
       },
       {
           "id": 3,
           "inner": "g",
           "code": "garden"
       },
       {
           "id": 3,
           "inner": "h",
           "code": "height"
       },
       {
           "id": 3,
           "inner": "i",
           "code": "ice"
       }
   ]

var list2 = [{
           "id": 2,
           "inner": "b"
       },
       {
           "id": 5,
           "inner": "e"
       },
       {
           "id": 8,
           "inner": "h"
       },
       {
           "id": 9,
           "inner": "i"
       }
   ]

var strObj = 'b,e,h,i';
   var arr = [];

//初始值
   function loadData(list) {
       var panel = document.getElementsByClassName('panel')[0];
       for (var i = 0, str = ''; i < list.length; i++) {
           arr.push(list[i].inner);
           str += '<div class="panel_detail">' + list[i].code + '(' + list[i].inner + ')</div>';
       }
       panel.innerHTML = str;
   }

//已有值
   function splitData() {
       var list = strObj;
       // console.log(list);
       list = list.split(',');
       var main = document.getElementsByClassName('panel_all')[0];
       var panel = document.getElementsByClassName('panel_add')[0];
       // console.log(list);
       var reg = /\((\w)\)/;
       for (var i = 0; i < arr.length; i++) {
           var elem = main.children[i];
           var inner = elem.innerHTML;
           inner = inner.match(reg)[1];
           // console.log(inner);
           for (var y = 0, str = ''; y < list.length; y++) {
               str += '<div class="panel_detail">' + list[y] + '</div>';
               if (list[y] == inner) {
                   elem.className += ' hide';
               }
           }
       }
       panel.innerHTML = str;
       setVal();
   }

document.getElementsByClassName('box')[0].addEventListener('click', function() {
       var e = window.event || arguments.callee.caller.arguments[0];
       var tar = e.target || e.srcElement;
       var str = tar.getAttribute('data-exCh');
       if (str) {
           console.log('切换');
           doSame(tar, str);
       }

if (tar.className.indexOf('clk') == -1 && tar.className.indexOf('panel_detail') != -1) {
           tar.className += ' clk';
           return;
       }
       // console.log('已存在');
       tar.className = tar.className.replace(/ clk/g, '');
   });

window.onload = function() {
       loadData(list1);
   }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

panel切换



代码描述：数据赋值去重

正常情景下左侧栏是异步加载的完整数据点击按钮后会异步请求数据放到到右边栏,同时会和左边栏总数据对比，将重复数据去重(hide)中间的两个按钮会控制左右移动最终会将右边栏的数据以逗号分隔的形势塞到 class为 hide_val 下的 input 里以便提交数据

1

最新

发表评论全部评论

暂时没有评论！

.0

2018/10/19 19:20:25

以下为最新代码，修复了这个版本的一点bug
http://www.jq22.com/webqd4760

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

.

相关代码

panel切换

最新