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