当前位置: 首页 > news >正文

一个编辑功能所引发的一场知识探索学习之旅(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 函数的用法示例:


在这里插入图片描述


本文涉及知识点:

  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
http://www.dtcms.com/a/273204.html

相关文章:

  • 笔记:CMakeLists基础语法
  • 在Zabbix 7 中配置对Nginx的监控
  • 外呼如何提高接通率
  • Rail开发日志_2
  • burpsuite记录
  • 深入理解oracle ADG和RAC
  • kotlin中集合的用法
  • kotlin中withContext,async,launch几种异步的区别
  • 【Python练习】035. 编写一个函数,实现简单的文本搜索功能
  • CPU调度调度算法
  • 低功耗小尺寸的空间入侵监测报警设备的市场需求方向
  • 【Python常见问题】【路径】路径总是有问题?深度剖析
  • 【JVM|垃圾回收】第二天
  • Transformer模型原理概述
  • 【Linux】Linux 操作系统 - 27 , 进程间通信(三) --System V 共享内存
  • 零基础入门物联网-远程门禁开关:硬件介绍
  • 多线程学习
  • 指针的const应用
  • 老式MVC架构Web应用:经典框架下的技术坚守与现代挑战
  • STM32F103C8T6驱动无源蜂鸣器详解:从硬件设计到音乐播放
  • 使用SpringAOP自定义权限控制注解
  • 从零开始的语言模型构建 CS336 第一课(一)
  • 【Python练习】036. 编写一个函数,将一个字符串中的所有字符按ASCII值排序
  • 用OpenCV标定相机内参应用示例(C++和Python)
  • Git简单命令
  • 获取印度股票数据API实战指南:NSE与BSE双市场对接
  • 华为OD 周末爬山
  • upload-labs靶场通关详解:第21关 数组绕过
  • 微服务架构下的自动化测试策略调优经验分享
  • 【基于大模型 + FAISS 的本地知识库与智能 PPT 生成系统:从架构到实现】