首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用 HTML、CSS 和 Vanilla JavaScript 以及本地存储创建待办事项应用程序

事件侦听器函数中,我们将从用户获取输入值,将其传递给函数addTask(),并将输入值设置为空字符串。...>`; ulElement.innerHTML += html; editTask(); } 正如您所看到的,代表任务的每个 li 元素都有一个作为数据属性值添加的唯一 id ( data-id...最后,我们获取 li 元素的 data 属性值并将其存储在名为 的变量中taskId。我们在实现本地存储时会用到这个值 编辑任务 定义一个名为 的函数editTask()。...在这个函数中,我们想要执行与删除按钮相同的步骤:即: 获取所有编辑按钮 使用forEach()方法迭代并获取最接近的li元素 获取 data-id 属性 allTasks使用 id 在数组中查找任务...,对于每个按钮,我们从最近的 li 元素的 data 属性获取任务 id

7510
您找到你想要的搜索结果了吗?
是的
没有找到

LayUI之旅-入门

JS部分 // 配置tab实践在下面无法获取到菜单元素 $('body').on('click',".layui-nav-itemed a", function (...) { var dataid = $(this); //这时会判断右侧.layui-tab-title属性下的有lay-id属性li的数目,即已经打开的tab项数目...(url, id, name) { //新增一个Tab项 传入三个参数,分别对应其标题,tab页面的地址,还有一个规定的id,是标签中data-id属性值...造成服务器请求次数过多时“小事”,因为事件被重复执行,部分页面功能无法按既定目标完成执行才是“大事”。...这个坑呢,主要是因为官方文档是真的有那么一乱,按照正常逻辑,是不是应该先讲怎么使用行内工具条,再讲怎么监听工具条事件吧,而官方文档写的尽然是监听头部工具栏事件(然后在下面写了个具体用法参见:绑定工具条

2.7K20

【实战】我是如何在输入框实现@ At功能的

如果您使用id,它就有重复的问题,这就意味着你不可能重用某个元素。 例:我再生成一个富文本组件就会初始化失败、因为id是唯一的。这就是为什么很多人推荐尽量少用ID的原因。...要兼容中文输入法的时候@的事件判断(如:中文输入法打“哈哈哈@” 这个时候不能监听@的事件 ) 中文输入法的时候单独输入@的时 怎么判断中文输入?...虽然不能做到完全统一但是能做到数据至少是一致的(现在又觉得、textarea、inpu方案的好了) /** * 例 富文本: @小明 喂三几拉 @饮茶哥 出来饮茶 * 生成数组: * [ * {segment: '@小明 \n', userId: 'idxxxxx...data-idID的 if (item && item.attrs && item.attrs.find(e => e.name === 'data-id')) {

2.4K20

你不知道的React 和 Vue 的20个区别【源码层面】

DOM更新,是外部监听处理更新; 3.differcompile 阶段的optimize标记了static ,可以减少 differ 次数,而且是采用双向遍历方法; 2.React 和 Vue...="app"> itemid:{{item.id}} //转化为...n); 不同点: 1.React 首位是除删除外是固定不动的,然后依次遍历对比; 2.Vue 的compile 阶段的optimize标记了static ,可以减少 differ 次数,而且是采用双向遍历方法...; 4.reducer:纯函数来处理事件,纯函数指一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用,得到一个新的 state; 源码组成: 1.createStore 创建仓库,接受...2.主要就是为了减小副作用,避免影响 state 值,造成错误的渲染; 3.把reducer设计成纯函数,便于调试追踪改变记录; 9.Vuex的mutation和Redux的reducer中为什么不能做异步操作

1.4K31
领券