时间戳

首页 > 解决方案 > 如何访问按钮提交的自声明属性？

javascript - 如何访问按钮提交的自声明属性？

问题描述

我创建了一个简单的按钮并添加了一些自我声明的属性（postid 和作者）。

    <%for(var blog of user.posts){%>
      <button type="submit" id="likebtn" onclick="likedpost()" 
       postid="<%=blog._id%>" author="<%=user.username%>">Like</button>
<%}%>

这是我定义的一个函数。

function likedpost(){
 var id = document.getElementById("likebtn").getAttribute("postid");
 var author = document.getElementById("likebtn").getAttribute("author");
 console.log("id form likedpost function =" +id+"and author of this post is="+author);
 console.log('post liked');
 }

对于每个博客项目，当我单击其各自的按钮时，它会为 console.log() 中的所有项目提供相同的 blog._id。我可以在检查器中看到每个按钮都有不同的 blog._id。我认为问题在于它找到了 id = "likebtn" 的第一个元素，因为每个按钮都有相同的 id，即它返回第一个值。我该如何解决？谢谢！

标签： javascript

解决方案

您不应该对多个元素使用相同的 ID 标签。Intead，您可以通过函数传递对按钮本身的引用并访问属性。最佳做法是data-attributes通过dataset属性访问它们

function likedpost(el) {
  let id = el.dataset.postid;
  let author = el.dataset.author;
  console.log("id form likedpost function =" + id + "and author of this post is=" + author);
  console.log('post liked');
}
<button type="submit" id="likebtn" onclick="likedpost(this)" data-postid="<%=blog._id%>" data-author="<%=user.username%>">Like</button>

推荐阅读