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

您可以将事件附加到按钮上，并使用this对象引用当前单击的按钮：

$('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>

Answer 2

您可以使用事件变量获取事件的目标（即负责的元素），并从那里获取其ID，如下所示：

let btnId = event.target.id;

但是，要使其正常工作，您应该为按钮分配唯一的ID。如果要提供其他数据（或不想使用id），则可以附加自定义属性（例如data-value或类似属性，并按以下方式使用它：

let myValue = event.target.getAttribute('data-value');

Answer 3

如果所有按钮都具有此标记

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

然后DOM将它们视为一个按钮，您应该找到一种将唯一ID附加到按钮上的方法

Answer 4

您需要在文章和相应按钮之间建立关系，一种实现方式是使用HTML5 data属性。将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 5

您可以获取单击按钮的对象，然后可以从该对象获取任何详细信息，例如索引或所需的任何内容。

Glide.with(context)
  .asBitmap()
  .load(url)
  .into(new Target<Bitmap>() {
     ...
});

Answer 6

您可以使用JavaScript直接实现。

document.addEventListener('click',(e)=>{
  console.log(e.target.id)
})

<button type="button" id="delete-article1" class="btn btn-small btn-danger">Delete1</button>
<button type="button" id="delete-article2" class="btn btn-small btn-danger">Delete2</button>
<button type="button" id="delete-article3" class="btn btn-small btn-danger">Delete3</button>
<button type="button" id="delete-article4" class="btn btn-small btn-danger">Delete4</button>
<button type="button" id="delete-article5" class="btn btn-small btn-danger">Delete5</button>
<button type="button" id="delete-article6" class="btn btn-small btn-danger">Delete6</button>
<button type="button" id="delete-article7" class="btn btn-small btn-danger">Delete7</button>

Javascript如何识别点击的按钮

6 个答案: