Javascript如何识别点击的按钮

Question

我有一个页面，里面有很多文章。每篇文章都有一个删除按钮。如何识别为文章单击的按钮？

目前我有这个：

<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>

$('#delete-article').on('click', function(e) {

    console.log('Test delete article');

});

这会根据页面上的文章数量记录“测试删除文章”。

Answer 1

您可以使用您的事件变量来获取事件的目标（即负责的元素）并从那里获取其 id，如下所示：let&nbsp;btnId&nbsp;=&nbsp;event.target.id;但是，为了使其正常工作，您应该为按钮分配唯一的 ID。如果您想提供其他数据（或者您不想使用 id），您可以附加自定义属性，likedata-value或 similar，并像这样使用它：let&nbsp;myValue&nbsp;=&nbsp;event.target.getAttribute('data-value');

Answer 2

您需要在文章和相应按钮之间建立关系，一种实现方式是使用 HTML5数据属性。分配data-articleId给按钮元素中的文章 ID，当您单击该按钮时，您可以使用 Jquery.data()函数访问单击了哪个按钮。<button type="button" data-articleId='123' class="btn btn-small btn-danger delete-article">Delete</button>$('.delete-article').on('click', function(e) {&nbsp; &nbsp; $(this).data('articleId'); //will return 123;&nbsp; &nbsp; console.log('Test delete article');});

Answer 3

您可以在按钮上附加事件并使用thisobject 来引用当前单击的按钮：$('button').on('click', function(e) {&nbsp; &nbsp; console.log(this.id);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button><button type="button" id="delete-article-2" class="btn btn-small btn-danger">Delete</button>