jQuery回调使用教程：如何将模态框选中的uValue写入指定输入框

核心思路 #

通过临时存储当前需要赋值的输入框对象，在用户选中模态框数值后直接写入对应输入框，无需大幅修改原有代码。

实现代码（无全局变量版本，更推荐） #

1. 修改按钮点击事件 #

$(".calc-uv").click(function() {
  // 将当前选中的输入框存入模态框的data属性中，避免全局变量污染
  const calcField = $(this).parent().prev().find("input");  
  $("#calculateUValue").data('targetInput', calcField);
});

2. 修改模态框数值选中事件 #

$(".uvalue-table a").click(function(u){
  u.preventDefault();
  const uValue = $(this).parent().prev().text();
  const $modal = $("#calculateUValue");
  // 取出之前存储的目标输入框
  const targetInput = $modal.data('targetInput');
  // 存在目标输入框时写入数值
  if (targetInput) {
    targetInput.val(uValue);
    // 写入完成后清除存储的内容，避免后续赋值出错
    $modal.removeData('targetInput');
  }
  $modal.modal('hide');
});

适配说明 #

该方案天然支持页面多组重复的输入框结构，每次点击不同的「Calculate U-Value」按钮都会更新存储的目标输入框，不会出现赋值错位的问题。

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