Javascript 规范化jquery中的各种表单输入值

我有以下重复代码：

// (3) Change to whether user has an acceptable rate or not
$('.rate-ok').on("change", function(event) {
    var id = $(this).data('id');
    var field = "rate_ok";
    var value = $(this).is(':checked');
    console.log(id, field, value)
    $.post('/update_data/', {'id': id, 'field': field, 'value': value}, function (response) {
        location.reload();
    })
});

// (4) Change on status
$('.status').on("change", function(event) {
    var id = $(this).data('id');
    var field = "status";
    var value = $(this).find(":selected").val();
    console.log(id, field, value)
    $.post('/update_data/', {'id': id, 'field': field, 'value': value}, function (response) {
        location.reload();
    })
});

这样做的目的是更新db表，如下所示：

UPDATE table SET field=value WHERE id=id

---

不过，将这两个函数压缩为一个要简单得多。但是，

值

部分不同——一个是复选框，另一个是选择下拉列表。有没有一种方法可以在单个函数中获取这两个项的“值”（不仅仅是添加一个if语句，还有可能根据输入类型更具通用性。

一种方法是概括字段更新部分：

function updateField(id, field, value) {
  console.log(id, field, value);
  $.post('/update_data/', {'id': id, 'field': field, 'value': value}, function (response) {
    location.reload();
  });
}

// (3) Change to whether user has an acceptable rate or not
$('.rate-ok').on("change", function(event) {
  updateField($(this).data('id'), 'rate_ok', $(this).is(':checked'));
});

// (4) Change on status
$('.status').on("change", function(event) {
  updateField($(this).data('id'), "status", $(this).find(":selected").val());
});

---

这种方法有点冗长，但它将处理各种类型的输入（包括选择）——

---

谢谢你的建议。我也用过类似的方法——我的方法看起来太老土了吗（上图），或者这个答案看起来合理吗？我觉得你的方法合理，因为所有必要的细节都在数据属性中。这是正确的方法。参数化win@AluanHaddad谢谢你的反馈。出于好奇，你能解释一下为什么这种方法比我添加的方法更可取吗？@David542主要是因为它可以更精确地计算出相关部分，因为在您的方法中，任何输入更改时都会经过所有检查。另一种方法是事件处理程序工厂。似乎可以，但我认为最好将逻辑分离为一些get value函数

$('.update-db-on-change').on("change", function(event) {

    // variables are id, field, value
    var id = $(this).data('id');
    var field = $(this).data('field');
    var field_type = $(this).attr('type') || $(this).prop('tagName');
    var value;

    // get the value based on the field_type
    if (field_type == 'SELECT') {
        value = $(this).find(":selected").val();
    } else if (field_type == 'checkbox') {
        value = $(this).is(':checked')
    } else if (field_type == 'text') {
        value = $(this).val();
    }

    // update our database
    console.log(id, field, value)
    $.post('/update_data/', {'id': id, 'field': field, 'value': value}, function (response) {
        location.reload();
    })

});