如何选择从具有相同类的元素列表中单击的特定元素

Question

我当前正在根据从数据库返回的信息渲染页面。我使用 for 循环将此结果（这是一个数组）格式化为一个表，也为每个结果提供了一个类似的类。我使用 for 循环插入一个删除和编辑按钮，每个按钮具有类似的类。现在，为了实现记录的编辑和删除，我尝试将类定位为删除或编辑按钮，因为我无法分配 id，因为我不知道单击的 id（因为 html 是由 for 循环生成的）。问题是我在将单击的编辑或删除按钮与其类或使用

$(this)

或使用

$(e.relatedTarget)

时遇到问题

这是我所做的一个伪示例。加载index.html 时，查询将发送到返回结果的php 例程。下面的代码仅将每条记录格式化为表格

$.ajax({url, dataType, method, data, success: function(result){
      //loop through all results, and presnt nicdly in a table
      for (let i = 0; i < result.data.length; i++) {
        let id = result.data[i].id;
        $("#mainTable").append(
          '<tr><td>' +
            result.data[i].lastName +
            ", " +
            result.data[i].firstName +
            '</td><td >' +
            result.data[i].department +
            ' </td><td >' +
            result.data[i].location +
            '</td><td >' +
            result.data[i].email +
            '</td><td >' +
            '<button type="button" class="editButton" data-id="' +
            result.data[i].id +
            '">' +
            '<i class="fa-solid fa-pencil fa-fw"></i></button>' +
            " " +
            '<button type="button" class="delete" data-id="'+result.data[i].id+'"><i class="fa-solid fa-trash fa-fw "></i></button></td></tr>'
        );
      }
})

这是我如何尝试检索具有为 eaxmple 单击的删除类的按钮的“data-id”属性值

//deleted personnel row
  $(".delete").on("click", function () {
    console.log("clicked")
   let id = $(this).attr("data-id");
   console.log(id)
  });

这行不通。这个我也试过了

//deleted personnel row
  $(".delete").on("click", function (event) {
    console.log("clicked")
   let id = $(event.relatedTarget).attr("data-id");
   console.log(id)
      });

这些都不起作用。请注意，由于循环在返回的结果上运行，因此多个按钮将拥有“删除”类。所以没有办法知道被点击的按钮的索引。请问我该如何实现这一目标。

Answer 1

您的删除功能代码不正确。

请尝试这个

let id = $(this).data("id");