如何将 jquery 元素的“id”参数传递给具有数组的 function

Question

于是我创建了一个function来更新数据，使用ajax jquery，这样代码更短，可以反复使用。 如下面的代码所示：

$.fn.myUpdateConfig = function({
  formcomp: formcomp,
  urlcomp: urlcomp,
  errorcomp: errorcomp,
  editcomp: editcomp,
  id: id,
  beforeajaxcallb: beforeAjaxCallb = null,
  successcallb: successCallb = null,
  errorcallb: errorCallb = null,
  completecallb: completeCallb = null,
}) {
  let element = $(this);
  element.click(function(e) {
      e.preventDefault();
      let formdata = new FormData(formcomp[0]);
      formdata.append('_method', 'PUT');
      formValidation('hide', '', [errorcomp, editcomp]);
      element.addClass('btn-progress');
      loader.show();

      console.log(id)); //parameter "id" returns an empty value

    if (beforeAjaxCallb instanceof Function) beforeAjaxCallb();

    $.ajax({
      url: urlcomp + id,
      data: formdata,
      method: 'POST',
      dataType: 'json',
      processData: false,
      contentType: false,
      success: function(data) {
        formValidation('hide', '', [errorcomp, editcomp]);
        succSwallTimer(data.message);
        if (successCallb instanceof Function) successCallb();
      },
      error: function(data) {
        errorMessage(data, errorcomp, editcomp);
        if (errorCallb instanceof Function) errorCallb();
      },
      complete: function() {
        element.removeClass('btn-progress');
        loader.hide();
        if (completeCallb instanceof Function) completeCallb();
      }
    });
  });
};

在评论部分console.log(id)); ，参数“id”返回一个空值，所以返回错误“405 The PUT method is not supported for this route”，因为没有发送id。

以下是 function 调用：

$('#updateBtn').myUpdateConfig({
  formcomp: Vdef.formcomp.update,
  urlcomp: Vdef.urlcomp,
  errorcomp: Vdef.errorcomp.update,
  editcomp: Vdef.editcomp,
  id: $('#edit_id').val(),
  successcallb: function() {
    $('#editModal').modal('hide');
    Vdef.formcomp.update.trigger('reset');
  },
  completecallb: function() {
    table.draw();
  }
});

但是当我只传递 $ ('#edit_id')参数而不传递 val() 时，它会返回 jquery object。 结果： 和

结果：

所以我想要的是如何传递取自$('#edit_id').val()的“id”参数，该参数可以传递给myUpdateConfig()

Answer 1

当您初始化小部件时，您将获得#edit_id的值，而不是在用户单击更新按钮时。

更改它，以便将选择器传递给小部件，并在事件侦听器中获取值。

$.fn.myUpdateConfig = function({
  formcomp: formcomp,
  urlcomp: urlcomp,
  errorcomp: errorcomp,
  editcomp: editcomp,
  selector: selector, // replacing id: id
  beforeajaxcallb: beforeAjaxCallb = null,
  successcallb: successCallb = null,
  errorcallb: errorCallb = null,
  completecallb: completeCallb = null,
}) {
  let element = $(this);
  element.click(function(e) {
      e.preventDefault();
      let formdata = new FormData(formcomp[0]);
      formdata.append('_method', 'PUT');
      formValidation('hide', '', [errorcomp, editcomp]);
      element.addClass('btn-progress');
      loader.show();
      let id = $(selector).val(); // Get value of input
      console.log(id));
    if (beforeAjaxCallb instanceof Function) beforeAjaxCallb();

    $.ajax({
      url: urlcomp + id,
      data: formdata,
      method: 'POST',
      dataType: 'json',
      processData: false,
      contentType: false,
      success: function(data) {
        formValidation('hide', '', [errorcomp, editcomp]);
        succSwallTimer(data.message);
        if (successCallb instanceof Function) successCallb();
      },
      error: function(data) {
        errorMessage(data, errorcomp, editcomp);
        if (errorCallb instanceof Function) errorCallb();
      },
      complete: function() {
        element.removeClass('btn-progress');
        loader.hide();
        if (completeCallb instanceof Function) completeCallb();
      }
    });
  });
};

$('#updateBtn').myUpdateConfig({
  formcomp: Vdef.formcomp.update,
  urlcomp: Vdef.urlcomp,
  errorcomp: Vdef.errorcomp.update,
  editcomp: Vdef.editcomp,
  selector: '#edit_id', // replacing id: $("#edit_id").val()
  successcallb: function() {
    $('#editModal').modal('hide');
    Vdef.formcomp.update.trigger('reset');
  },
  completecallb: function() {
    table.draw();
  }
});