如何解决Jquery 到 Vanilla Javascript 获取属性数据
对不起,我想问一下,我想把Jquery改成Vanilla JS,但是我对jquery和javascript逻辑不了解
<a href="#" class="btn btn-info btn-sm btn-edit" data-id="<?= $row->product_id;?>" data-name="<?= $row->product_name;?>">Edit</a>
$(document).ready(function(){
// get Edit Product
$('.btn-edit').on('click',function(){
// get data from button edit
const id = $(this).data('id');
const name = $(this).data('name');
// Set data to Form Edit
$('.product_id').val(id);
$('.product_name').val(name);
// Call Modal Edit
$('#editModal').modal('show');
});
});
如果可能的话,将 jquery 更改为 vanilla/plain javascript 或者如果你知道的话,你能告诉我关于这个案例的参考吗?谢谢 ps:如果错了,我很抱歉,我今天刚加入stackoverflow,我的英语水平很差
解决方法
使用 document.querySelector() 获取所需元素并使用 Element.getAttribute() 获取自定义数据属性:
$(document).ready(function() {
const btnEdit = document.querySelector(".btn-edit");
const prodId = document.querySelector(".product_id");
const prodName = document.querySelector(".product_name")
const modal = document.querySelector("#editModal");
btnEdit.addEventListener("click",(evt) => {
const id = evt.target.getAttribute('data-id');
const name = evt.target.getAttribute('data-name')
prodId.value = id;
prodName.value = name;
modal.classList.add("show") //--> some css class to display the modal
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。