如何通过元素data属性获取特定变量，复用函数更新对应jQuery变量？

这问题我做表单开发时也碰到过，重复写函数实在太冗余了，用data属性统一处理绝对是高效的解法，我给你一步步捋清楚怎么实现：

第一步：给输入元素添加统一类名和Data属性 #

先给所有需要复用逻辑的输入框加一个共同类（比如dynamic-input），再用data-target属性指定它要更新的变量名，通过这个属性就能把输入框和对应的变量关联起来：

<!-- 文本输入框 -->
<input type="text" class="dynamic-input" data-target="username" value="JohnDoe">
<!-- 邮箱输入框 -->
<input type="email" class="dynamic-input" data-target="userEmail" value="john@example.com">
<!-- 数字输入框 -->
<input type="number" class="dynamic-input" data-target="userAge" value="30">
<!-- 复选框 -->
<input type="checkbox" class="dynamic-input" data-target="receiveNews" checked>

第二步：集中管理目标变量（推荐方案） #

别把变量散着定义成全局变量，用一个对象集中管理会更安全，也方便通过属性名快速访问：

// 统一存储需要更新的变量
const formState = {
  username: '',
  userEmail: '',
  userAge: 0,
  receiveNews: false
};

第三步：编写通用的事件处理函数 #

只需要写一次函数，绑定到所有带dynamic-input类的元素上，通过读取data-target属性就能确定要更新哪个变量：

$(document).ready(function() {
  // 绑定输入/变化事件
  $('.dynamic-input').on('input change', function() {
    const $this = $(this);
    // 获取data属性指定的目标变量名
    const targetKey = $this.data('target');
    // 根据输入类型获取对应的值
    let inputValue;
    
    // 针对不同输入类型做适配
    switch($this.attr('type')) {
      case 'checkbox':
        inputValue = $this.prop('checked');
        break;
      case 'number':
        inputValue = parseInt($this.val()) || 0;
        break;
      default:
        inputValue = $this.val();
    }
    
    // 更新对应的变量
    formState[targetKey] = inputValue;
    
    // 调试用：打印更新后的变量状态
    console.log('当前表单状态:', formState);
  });
});

额外小贴士 #

• 如果你的变量是全局变量（不推荐，但如果必须用），可以把formState[targetKey]换成window[targetKey]，直接更新全局变量
• 下拉框（select元素）不需要额外处理，val()就能拿到选中的值
• 要是需要把变量初始化为输入框的默认值，页面加载时手动触发一次change事件就行：$('.dynamic-input').trigger('change');

这样不管后续加多少个输入框，只要给它加上dynamic-input类和对应的data-target属性，就能自动复用这个逻辑，完全不用再写新的函数啦！

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