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 btnId = event.target.id;

但是，为了使其正常工作，您应该为按钮分配唯一的 ID。如果您想提供其他数据（或者您不想使用 id），您可以附加自定义属性，likedata-value或 similar，并像这样使用它：

let myValue = 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) {

    $(this).data('articleId'); //will return 123;

    console.log('Test delete article');

});

Answer 3

您可以在按钮上附加事件并使用thisobject 来引用当前单击的按钮：

$('button').on('click', function(e) {

    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>