Jquery 到 Vanilla Javascript 获取属性数据答案

【问题标题】：Jquery to Vanilla Javascript get attribute dataJquery 到 Vanilla Javascript 获取属性数据
【发布时间】：2021-04-09 16:10:11
【问题描述】：

对不起，我想问一下，我想把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，英文不好

【问题讨论】：

向我们展示您的尝试。 SO 不是免费的代码编写服务。此处的目的是让您发布解决自己问题的尝试，并在其他人无法按预期工作时提供帮助。见How to Ask 和minimal reproducible example
如果我错了，我很抱歉，我今天刚加入堆栈溢出，我的英语水平很差

标签： javascript jquery bootstrap-4 bootstrap-modal bootstrap-5

【解决方案1】：

使用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
  });
});

【讨论】：