JS/JQuery点击按钮后存储参数供后续函数使用的实现疑问

嘿，这个问题我之前做项目时也碰到过！其实有几个很实用的小技巧能帮你把选中行的ID存下来，等点击保存时再用，给你详细说说：

方法1：利用模态框的自定义数据属性（最推荐） #

这种方式最干净，不会污染全局变量，也不用额外加DOM元素。

当用户点击编辑按钮时，先拿到行ID，然后把它存在模态框的data-*属性里：

// 点击编辑按钮的事件
$('.edit-btn').on('click', function() {
  // 获取当前行的ID（替换成你实际的选择器）
  const rowId = $(this).closest('tr').find('.your-id-element').text();
  // 把ID存到模态框的data属性中
  $('#your-modal').data('row-id', rowId);
  // 打开模态框
  $('#your-modal').modal('show');
});

然后点击保存按钮时，直接从模态框的data属性里取出ID：

// 点击保存按钮的事件
$('.save-btn').on('click', function() {
  // 取出之前存储的行ID
  const currentRowId = $('#your-modal').data('row-id');
  // 获取用户输入的值
  const inputValue = $('#your-input-field').val();
  
  // 这里就可以把currentRowId和inputValue一起传给控制器了
  $.ajax({
    url: '/your-controller-api',
    method: 'POST',
    data: { id: currentRowId, inputValue: inputValue },
    // 后续的成功/失败处理逻辑...
  });
});

方法2：使用全局变量（适合单模态场景） #

如果你的页面只有一个模态框，不会同时处理多个编辑请求，用全局变量也很方便：

先在全局作用域声明一个变量：

// 全局变量存储当前正在编辑的行ID
let currentEditingRowId;

点击编辑时给变量赋值：

$('.edit-btn').on('click', function() {
  currentEditingRowId = $(this).closest('tr').find('.your-id-element').text();
  $('#your-modal').modal('show');
});

保存时直接调用这个变量：

$('.save-btn').on('click', function() {
  const inputValue = $('#your-input-field').val();
  // 直接使用全局变量里的ID
  $.ajax({
    url: '/your-controller-api',
    method: 'POST',
    data: { id: currentEditingRowId, inputValue: inputValue },
    // ...
  });
});

⚠️ 注意：如果页面有多个模态框或者可能同时触发多个编辑操作，全局变量容易被覆盖，这种情况就不推荐啦。

方法3：在模态框中添加隐藏输入框 #

如果你的模态框里本身是一个表单，这种方法特别适配，因为提交表单时隐藏输入框的值会自动被携带：

先在模态框的表单里加一个隐藏输入框：

<div class="modal" id="your-modal">
  <div class="modal-body">
    <form id="edit-form">
      <input type="hidden" id="row-id-hidden" name="rowId">
      <input type="text" id="your-input-field" name="inputValue" placeholder="请输入内容">
      <button type="submit" class="save-btn">保存</button>
    </form>
  </div>
</div>

点击编辑时给隐藏输入框赋值：

$('.edit-btn').on('click', function() {
  const rowId = $(this).closest('tr').find('.your-id-element').text();
  $('#row-id-hidden').val(rowId);
  $('#your-modal').modal('show');
});

提交表单时，隐藏输入框的rowId会和输入值一起被提交到控制器：

$('#edit-form').on('submit', function(e) {
  e.preventDefault();
  const formData = $(this).serialize();
  $.ajax({
    url: '/your-controller-api',
    method: 'POST',
    data: formData,
    // ...
  });
});

这几种方法都能完美解决你的问题，根据你的页面结构选最适合的就行～

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