封装列表增加删除插件

最新推荐文章于 2020-12-05 09:08:20 发布

晨读秀秀

最新推荐文章于 2020-12-05 09:08:20 发布

阅读量551

点赞数

分类专栏： js小实例练习文章标签： js list

本文链接：https://blog.csdn.net/vayulu/article/details/81461649

版权

js小实例练习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>列表的增删和移动</title>
    <style>
      body{background:#ddd;text-align:center}
      .list{display:inline-block;margin-top:20px;padding:40px;border-radius:8px;background:#fff;color:#333;text-align:left;font-size:13px}
      .list-ul{list-style:none;margin:0;padding:0}
      .list-option{padding:6px 0;}
      .list-input{width:300px;border:1px solid #ccc;padding:4px;font-size:14px;color:#333}
      .list-input:hover{background:#effaff}
      .list-btn span{color:#0065A0;;cursor:pointer}
      .list-btn span:hover{text-decoration:underline}
      .list-btn b{text-align:center;background-color:#D6EDFF;border-radius:6px;width:20px;height:20px;display:inline-block;margin:0 2px;cursor:pointer;color:#238FCE;border:1px solid #B3DBF8;float:left}
      .list-bottom{margin-top:5px}
      .list-add-show{color:#f60;cursor:pointer}
      .list-add-show:before{position:relative;top:1px;margin-right:5px;content:"+";font-weight:700;font-size:16px;font-family:arial}
      .list-add-show span:hover{text-decoration:underline}
      .list-add-area{margin-top:5px}
      .list-add-add{cursor:pointer;margin-left:5px}
      .list-add-cancel{cursor:pointer;margin-left:4px}
      .list-add-input{width:180px;border:1px solid #ccc;padding:4px;font-size:14px;color:#333}
      .list-add-input:hover{background:#effaff}
      .list-tmp{display:none}
      .list-hide{display:none}
    </style>
  </head>
  <body>
    <form>
      <div class="list">
        <ul class="list-ul">
          <li class="list-option">
            <input class="list-input" type="text" name="list[]">
            <span class="list-btn">
              <span class="list-up">[上移]</span>
              <span class="list-down">[下移]</span>
              <span class="list-del">[删除]</span>
            </span>
          </li>
        </ul>
        <div class="list-bottom">
          <span class="list-add-show"><span>添加项目</span></span>
          <div class="list-add-area list-hide">
            添加到列表：
            <input class="list-add-input" type="text" name="list[]">
            <input class="list-add-add" type="button" value="添加">
            <input class="list-add-cancel" type="button" value="取消">
          </div>
        </div>
      </div>
    </form>
    <script type="text/javascript" src="SmartList.js" ></script>
    <script>
      SmartList('list', ['PHP', 'JavaScript']);
    </script>
  </body>
</html>

;
(function(window, document, undefine) {
	/*
	 *smartlist 列表生成器
	 * @param{String} prefix class的前缀
	 * @param {Array} deflist 默认项数
	 * @creater ddcat
	 */
	var SmartList = function(prefix, defList) {
		Find.prototype.prefix = prefix;
		//获取全部前缀集合
		var find = new Find(document.getElementsByClassName(prefix)[0]);
		console.log(find);
		var list = new List(find.className('option'));
		
		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() {
			list.add(add.input.value);
		};
		add.cancel.onclick = function() {
			add.area.classList.add(prefix + '-hide');
		};
	};

	function List(element) {
		this.element = element;
		this.obj2 = element.parentNode;
		this.obj2.removeChild(element);
	}
	List.prototype = {
		add: function(value) {
			var element = this.element.cloneNode(true); //赋值当前节点
			var find = new Find(element);
			//将value添加到list-input的value中显示
			find.className('input').value = value;
			var obj2 = this.obj2;
			find.className('up').onclick = function() {
				var prev = find.prev();
				if(prev) {
					obj2.insertBefore(element, prev);
				} else {
					alert("已经是第一个了");
				}
			};
			find.className('down').onclick = function() {
				var next = find.next();
				if(next) {
					obj2.insertBefore(next, element);
				} else {
					alert("已经是最后一个了");
				}
			};
			find.className('del').onclick = function() {
				if(confirm("您确定要删除吗？")) {
					obj2.removeChild(element);
				}
			};
			this.obj2.appendChild(element);
		}
	}
	//获取列表操作对象 根据类名 list-input,list-up,list-down,list-del;
	function Find(obj) {
		this.obj = obj; //构造函数
	}
	Find.prototype = {
		prefix: '',
		className: function(className) {
			//前缀+ - + classname 例如 list-input
			return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];
		},
		//查找前一个兄弟节点
		prev: function() {
			var node = this.obj.previousSibling;
			//查找的节点可能是空格
			while(node) {
				//如果兄弟节点是元素节点,跳出循环
				if(node.nodeType == Node.ELEMENT_NODE) {
					break;
				}
				node = node.previousSibling; //循环查询前一个
			}
			return node;
		},
		next: function() {
			var node = this.obj.nextSibling;
			while(node) {
				if(node.nodeType == Node.ELEMENT_NODE) {
					break;
				}
				node = node.nextSibling;
			}
			return node;
		}
	};
	window.SmartList = SmartList;
})(window, document);

我盯裆猫。。。。不知道怎么描述了，

通过find根据类名获取元素节点，因为类名的前缀都是list，不同的是-加名称，所以通过前缀获取到所有的节点，然后通过后缀分类，通过list构造方法进行功能实现，向上移动和向下移动以及删除添加，整体逻辑比较简单。。。不做过多表述了

晨读秀秀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
封装列表增加删除插件

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;列表的增删和移动&lt;/title&gt; &lt;style&gt; body{background:#ddd;text-align:center}
复制链接

扫一扫

专栏目录