jQuery点击删除按钮仅获取首个元素data-id值的问题排查

你遇到的id取值错误核心是选择器使用逻辑有误：

• 赋值逻辑中你使用$('.openDialog')选择器，会匹配页面上所有绑定了openDialog类的删除按钮
• jQuery对匹配到的元素集合调用.data()方法时，默认只会返回集合内第一个元素的对应属性值，因此无论点击哪个删除按钮，永远只会拿到第一条文章对应的id=1
• 额外存在HTML规范问题：PHP循环中给每个删除按钮都设置了相同的id="openDialog"，HTML要求id属性全局唯一，重复id会引发不可预期的DOM选择异常。

• 修改点击事件内的取值逻辑，在点击回调函数中使用$(this)指代当前触发点击事件的按钮元素，精准获取当前按钮上存储的data-id值
  将原有问题代码：

  // Sets the input value in dialog
  $('#post_id').val($('.openDialog').data("id")); // Here lies the problem
  

  替换为：

  // Sets the input value in dialog
  $('#post_id').val($(this).data("id"));
  

• 删除循环内删除按钮上重复的id属性，因为你已经通过类选择器完成事件绑定，不需要重复id，修复后的按钮代码：

  <button class="btn-small openDialog" data-id="<?php echo $row["post_id"];?>">
      <i class="fas fa-trash"></i>
  </button>
  

$(document).ready(function(){
    // Makes menu visibility toggable
    $('#hamburger_btn').on("click", function() {
        $('#sidemenu').toggleClass("show");
    })

    // Closes menu via separate button
    $('#close_btn').on("click", function() {
        $('#sidemenu').removeClass("show");
    })

    // Opens dialogbox
    $('.openDialog').on("click", function() {
        $('#dialog').addClass("showBox");
        $('#overlay').addClass("showOv");

        // Sets the input value in dialog
        $('#post_id').val($(this).data("id"));
    })

    // Closes dialogbox
    $('#closeDialog').on("click", function() {
        $('#dialog').removeClass("showBox");
        $('#overlay').removeClass("showOv");

        // Sets value to empty and remove attribute value
        $('#post_id').val('').removeAttr("value");
    })
});

补充安全提示：后端delete-post-db.php文件接收post_id执行删除操作时，必须增加权限校验，同时对传入的id做整数类型校验，避免未授权用户传入任意id即可删除数据的越权操作、SQL注入风险。

内容的提问来源于stack exchange，提问作者Stefan