一个编辑功能所引发的一场知识探索学习之旅(JavaScript、HTML)
文章目录
- 一个编辑功能所引发的一场知识探索学习之旅(JavaScript、HTML)
- 1. 一个编辑功能案例
- 2. 知识点探索学习
- 3. 参考资料
一个编辑功能所引发的一场知识探索学习之旅(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 函数的用法示例:
本文涉及知识点:
- 在 JavaScript 中,使用反引号(`)来创建模板字符串。有了模板字面量,就可以通过使用占位符 ${expression} 嵌入待替换的表达式,从而避免串联运算符,并提高代码的可读性。
- querySelector 函数的使用。
- closest 函数的使用
- 可选链操作符 ?. 防止空值报错
- 为输入框、下拉框赋默认值。
- 监听事件:获取输入框填写的值、获取下拉框选中的值。
3. 参考资料
- 模板字符串 - JavaScript | MDN
- Element.querySelector() - Web API | MDN
- jQuery closest() 方法 | 菜鸟教程
- Element.closest() - Web API | MDN
- 可选链运算符(?.) - JavaScript | MDN