ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

Html中Jacascript弹框,实现编辑功能

Html中Jacascript弹框,实现编辑功能

Html中Jacascript弹框,实现编辑功能

1763347213407

一、点击 编辑 出现弹框 获取元素

const editDom = document.querySelector(' .edit-modal' ) 
const editModal = new bootstrap.Modal(editDom)   // 编辑元素->点击->弹框显示document.querySelector('.list').addEventListener('click',e => {    // 判断点击的是否为编辑元素if (e.target.classList.contains('edit')) {//获取当前编辑图书数据->回显到编辑表单中 const theId = e.target.parentNode.dataset.id axios({url:`http://hmajax.itheima.net/api/books/${theId}}).then(result => {const bookobj= result.data.data      //author:"黑马”   bookname:“前端J5与移动开发'  id:84783  publisher:"北京出版社"   [[Prototype]]:object	})	                                   	editModal.show()
})

二、修改按钮->点击->隐藏弹框

document.querySelector('.edit-btn').addEventListener('click',()=>{editModal.hide()
})
返回列表