JavaScript實現專案列表的增刪移動

passerby&發表於2020-12-08
JavaScript

JavaScript實現專案列表的增刪移動

在前面我們已經學習了html和css，相信大家對此應該有了相當的理解
想要完成此項任務我們需要準備以下知識點：

Find()定義和用法

find() 方法返回通過測試（函式內判斷）的陣列的第一個元素的值。

find() 方法為陣列中的每個元素都呼叫一次函式執行：
當陣列中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之後的值不會再呼叫執行函式。
如果沒有符合條件的元素返回 undefined
當陣列中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之後的值不會再呼叫執行函式。
如果沒有符合條件的元素返回 undefined
find()語法：
array.find(function(currentValue, index, arr),thisValue)
currentValue表示當前元素，index表示當前元素的索引值，arr表示當前元素所屬的陣列物件，thisValue預設值是this表示當前物件

insertBefore() 方法

insertBefore() 方法在你指定的已有子節點之前插入新的子節點
insertBefore()語法
node.insertBefore(newnode,existingnode)
newnode表示需要插入的節點物件。
existingnode 在其之前插入新節點的子節點。如果未規定，則 insertBefore 方法會在結尾插入 newnode。
Node 物件表示你插入的節點。

思路分析
想要完成這個專案首先我們要明白的是這屬於html中的form標籤知識，因此我們可以在外層套一個Div標籤，然後在它裡面插入一個ul標籤裡面下面用一個li標籤來裝input標籤輸入的內容，旁邊的那些功能鍵我們就用span標籤然後用js定義function來實現各種功能。這樣我們就完成了上半部分。
下半部分我們同樣是利用Div和span標籤來完成佈局。

執行結果：
在這裡插入圖片描述
執行程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js專案列表的增刪和移動</title>
		<style>
			body{background:#ddd;text-align:center}
			.list{display:inline-block;margin-top:20px;padding:40px;border-radius:8px;background:lightsalmon;color:#000000;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 #00FFFF;padding:5px;font-size:16px;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 action="" method="">  
			<div class="list">
				<ul class="list-ul">
					<li class="list-option">
						<input type="text" class="list-input" name="list[]" id="" value="" />
						<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" id="">
					<span class="list-add-show">新增專案</span>
					<div class="list-add-area list-hide">
						新增到列表
						<input type="text" class="list-add-input" name="list[]" id="list[]" value="" />
						<input type="button" class="list-add-add"  value="新增" />
						<input class="list-add-cancel" type="button" value="取消" />
						
					</div>
				</div>
			</div>
		</form>
		，<script type="text/javascript">
			(function(window) {
				var SmartList = function(prefix, defList) {
					Find.prototype.prefix = prefix;
					var find = new Find(document.getElementsByClassName(prefix)[0]); // 獲取物件
					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 Find(obj) {
					this.obj = obj;
				}
				Find.prototype = {
					prefix: '', //待查詢的字首
					className: function(className) {
						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.nextElementSibling; //獲取當前元素物件的後一個節點
						while (node) {
							if (node.nodeType === Node.ELEMENT_NODE) {
								break;
							}
							node = node.nextElementSibling;
						}
						return node;
					}
				}
				function List(tmp) { // List建構函式 引數tmp表示操作的<li>元素模板
					this.tmp = tmp;
					this.obj = tmp.parentNode; // 儲存模板的父節點物件
					this.obj.removeChild(tmp); //從<ul>中移除<li>模板
				}
				List.prototype = {
					add: function(value) {
						var tmp = this.tmp.cloneNode(true); //克隆一個元素節點
						var find = new Find(tmp);
						find.className('input').value = value;
						var obj = this.obj; //獲取ul元素物件
						find.className('up').onclick = function() { //新增上移單擊事件
							var prev = find.prev(); //獲取前一個節點
							if (prev) {
								obj.insertBefore(tmp, prev); //在prev前插入tmp
							} else {
								alert('這已經是第一張了');
							}
						};
						find.className('down').onclick = function() { 
							var last = find.next(); 
							if (last) {
								obj.insertBefore(next, tmp); 
							} else {
								alert('這已經是最後一張了');
							}
						};
						find.className('del').onclick = function() { 
							if (confirm('你確定要刪除嗎？')) {
								obj.removeChild(tmp);
							}
						}
						this.obj.appendChild(tmp);
					}
			 
				};
				window['SmartList'] = SmartList;
			})(window);
			SmartList('list', ['Java', 'Linux']);  //新增預設專案
		</script>
			
	</body>
</html>

相關文章