|
#2
li712018-10-29 17:09
(function(window) {
/** * SmartList 智能列表生成 * @param {String} prefix 前缀 * @param {Array} defList 默认项数组 */ var SmartList = function(prefix, defList) { Find.prototype.prefix = prefix; var find = new Find(document.getElementsByClassName(prefix)['0']); var list = new List(find.className('opt')); for (var i in defList) { list.add(defList[i]); } var add = { 'show': find.className('add-show'), 'area': find.className('add-area'), 'input': find.className('add-input'), 'add': find.className('add-add'), 'cancel': find.className('add-cancel') }; add.show.onclick = function() { add.area.classList.remove(prefix + '-hide'); }; add.add.onclick = function() { prompt("请输入："); list.add(add.prompt.value); }; add.cancel.onclick = function() { add.area.classList.add(prefix + '-hide'); }; }; /** * Find 查找器 * @constructor * @param {Object} obj 待查找对象所在容器 */ function Find(obj) { this.obj = obj; } Find.prototype = { prefix: '', // 待查找的前缀 /** * 按照class查找元素 * @param {String} className */ className: function(className) { return this.obj.getElementsByClassName(this.prefix + '-' + className)[0]; }, /** * 查找当前元素的前一个兄弟元素节点 * @returns {Object} 查找结果 */ prev: function() { var node = this.obj.previousSibling; while(node) { if (node.nodeType === Node.ELEMENT_NODE) { break; } node = node.previousSibling; } return node; }, /** * 查找当前元素的后一个兄弟元素节点 * @returns {Object} 查找结果 */ next: function() { var node = this.obj.nextSibling; while(node) { if (node.nodeType === Node.ELEMENT_NODE) { break; } node = node.nextSibling; } return node; } }; /** * List 生成列表 * @constructor * @param {Object} tmp 模板对象 */ function List(tmp) { this.tmp = tmp; this.obj = tmp.parentNode; this.obj.removeChild(tmp); } List.prototype = { /** * 向列表中添加项目 * @param {String} value 新项目的文本值 */ add: function(value) { var tmp = this.tmp.cloneNode(true); // ① 将value添加到list-input的value属性中 var find = new Find(tmp); find.className('input').value = value; var obj = this.obj; // ② 为list-up（上移）添加单击事件 find.className('up').onclick = function() { var prev = find.prev(); if (prev) { obj.insertBefore(tmp, prev); } else { alert('已经是第1个'); } }; // ③ 为list-down（下移）添加单击事件 find.className('down').onclick = function() { var next = find.next(); if (next) { obj.insertBefore(next, tmp); } else { alert('已经是最后1个'); } }; // ④ 为list-down（删除）添加单击事件 find.className('del').onclick = function() { if (confirm('您确定要删除？')) { obj.removeChild(tmp); } }; // ⑤ 将创建的列表项添加到列表末尾 this.obj.appendChild(tmp); } }; })(window); 我自己也写了点 这是我的js文件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>优秀队员排行榜</title> <style> body{text-align:center} select{ width:220px; height:300px; } </style> </head> <body> <p><h1>优秀队员排行榜</h1></p> <select name="profession"multiple="multiple"> <option class="list-opt">张欣</option> <option class="list-opt">李明</option> <option class="list-opt">王紫悦</option> <option class="list-opt">赵刚</option> </select> <input class="list-up" type="button" value="上移"> <input class="list-down" type="button" value="下移"> <input class="list-add-add" type="button" value="添加"> <input class="list-del" type="button" value="删除"> <script src="duiyuan.js"></script> </body> </html> 这是h5文件 接下来就不会写了 只写了个框架 求助 |
只有本站会员才能查看附件，请 登录
