---

一個編輯功能所引發的一場知識探索學習之旅（JavaScript、HTML）

1. 一個編輯功能案例

HTML：

	<div class="modal active" id="rulesModal"><div class="modal-content"><div class="modal-header"><h3>智能分類規則配置</h3><button class="close-modal" id="closeRulesModal">×</button></div><div class="modal-body"><div class="form-group"><label>添加新規則</label><div style="display: flex; gap: 15px;"><input type="text" class="form-control" id="newRuleKeyword" placeholder="關鍵詞"><select class="form-control" id="newRuleCategory"><option value="" disabled="" hidden="">--- 請選擇 ---</option><option value="IT學習">IT學習</option><option value="英語學習">英語學習</option><option value="考試備考">考試備考</option></select><button class="btn" id="addRuleBtn" style="min-width: 100px;"><i class="fas fa-plus"></i> 添加</button></div></div><div class="rules-list" id="rulesList"><div class="rule-item"><div class="rule-keyword">IT</div><div class="rule-category">IT學習</div><div class="rule-actions"><div class="rule-action edit-rule" data-index="0"><i class="fas fa-edit"></i></div><div class="rule-action delete-rule" data-index="0"><i class="fas fa-trash"></i></div></div></div><div class="rule-item"><div class="rule-keyword">英語</div><div class="rule-category">英語學習</div><div class="rule-actions"><div class="rule-action edit-rule" data-index="1"><i class="fas fa-edit"></i></div><div class="rule-action delete-rule" data-index="1"><i class="fas fa-trash"></i></div></div></div><div class="rule-item"><div class="rule-keyword">考試</div><div class="rule-category">考試備考</div><div class="rule-actions"><div class="rule-action edit-rule" data-index="2"><i class="fas fa-edit"></i></div><div class="rule-action delete-rule" data-index="2"><i class="fas fa-trash"></i></div></div></div></div></div><div class="modal-footer"><button class="btn btn-outline" id="cancelRulesBtn">取消</button><button class="btn" id="saveRulesBtn">保存規則</button></div></div></div>

JavaScript：

        let rules = [];rules.push({keyword:"IT",category:"IT學習"},{keyword:"英語",category:"英語學習"},{keyword:"考試",category:"考試備考"});// 編輯規則function editRule(index) {const rule = rules[index];const rulesList = document.getElementById('rulesList');//const editButton = rulesList.querySelector(`[data-index="${index}"]`)// 原代碼（依賴DOM層級結構）//const editButton = rulesList.querySelector(`[class~="edit-rule"][data-index="${index}"]`);//const ruleItem = editButton.parentElement.parentElement;// 優化后（結構無關更健壯）const editButton = rulesList.querySelector(`.edit-rule[data-index="${index}"]`);const ruleItem = editButton?.closest('.rule-item'); // 可選鏈操作符 ?. 防止空值報錯ruleItem.querySelector(".rule-keyword").innerHTML=`<input type="text" class="form-control" style="max-width: 80%;" value="${rule.keyword}">`ruleItem.querySelector(".rule-category").innerHTML=`<select class="form-control" style="max-width: 80%;">${document.getElementById('newRuleCategory').innerHTML}</select>`// 原代碼（查詢多次）//ruleItem.querySelector(".rule-category .form-control").querySelector(`[value="${rule.category}"]`).selected = true// 優化后（查詢一次，更簡潔）ruleItem.querySelector(".rule-category .form-control").value=rule.category; //為下拉框默認賦值//const categoryDropdown = document.getElementById('newRuleCategory').innerHTML;// 監聽事件：獲取輸入框填寫的值ruleItem.querySelector(".rule-keyword .form-control").addEventListener('input', function() {rule.keyword = this.value.trim();console.log(rule.keyword);//rules.splice(index, 1, {keyword:rule.keyword,category:rule.category});});// 監聽事件：獲取下拉框選中的值ruleItem.querySelector(".rule-category .form-control").addEventListener('change', function() {rule.category = this.value;console.log(rule.category);//rules.splice(index, 1, {keyword:rule.keyword,category:rule.category});});	}

---

2. 知識點探索學習

知識補充：

closest 函數的用法示例：

本文涉及知識點：

1. 在 JavaScript 中，使用反引號（`）來創建模板字符串。有了模板字面量，就可以通過使用占位符 ${expression} 嵌入待替換的表達式，從而避免串聯運算符，并提高代碼的可讀性。
2. querySelector 函數的使用。
3. closest 函數的使用
4. 可選鏈操作符 ?. 防止空值報錯
5. 為輸入框、下拉框賦默認值。
6. 監聽事件：獲取輸入框填寫的值、獲取下拉框選中的值。

---

3. 參考資料

• 模板字符串 - JavaScript | MDN
• Element.querySelector() - Web API | MDN
• jQuery closest() 方法 | 菜鳥教程
• Element.closest() - Web API | MDN
• 可選鏈運算符（?.） - JavaScript | MDN