Question

我有以下重复代码：

// (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();
    })
});

这是什么，它将更新数据库表，如下所示：

UPDATE table SET field=value WHERE id=id

不过，将两个功能浓缩为一个要简单得多。但是，value部分并不相同-一个是复选框，另一个是select下拉列表。有没有一种方法可以在单个函数中获得这两项的“值”（不仅仅是添加if语句-而是希望根据输入类型更通用）。

Answer 1

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

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());
});

Answer 2

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

$('.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();
    })

});

在jQuery中规范各种表单输入值

2 个答案: