jQuery每個表-使用Ajax隱藏顯示

Question

我的應用程序是MVC 5，我試圖根據我使用Ajax從數據庫中獲取的值，使用以下腳本在每行中隱藏和顯示一個按鈕。

function setButtons() {
        $('#MyList > tbody  > tr').each(function () {
         var typeid  =  $(this).find("select").val();
         if (typeid != null ) {
          $.ajax({
                url: '/MyController/GetInfo',
                type: 'POST',
                data: {
                    id: typeid
                }
            })
            .success(function (data) {
                var tr;
                if (data == null) {
                    $(this).find("button#Details0").hide();
                } else {
                    $(this).find("button#Details0").show();
                }
            })
        .error(function (jqXHR, textStatus) {
            alert("error");
        });
        }
        });

我已經單獨測試了Ajax，它可以正常工作，我從select中獲取值，並從控制器接收數據。 我懷疑問題可能出在Ajax腳本中使用“ this”。 感謝您的建議。

Answer 1

您需要將$(this)分配給變量，以便in可以在成功函數中使用

function setButtons() {
  $('#MyList > tbody  > tr').each(function () {
    var self = $(this); // store the value
    var typeid  =  $(this).find("select").val();
    if (typeid != null ) {
      $.ajax({
        url: '/MyController/GetInfo', // recommend '@Url.Action("GetInfo", "MyController")'
        type: 'POST',
        data: { id: typeid }
      })
      .success(function (data) {
        var tr; // ? not used
        if (data == null) {
          self.find("button#Details0").hide(); // change this
        } else {
          self.find("button#Details0").show(); // and this
        }
      })
      .error(function (jqXHR, textStatus) {
        alert("error");
      });
    }
  });
}

請注意，不建議使用jqXHR.success()和jqXHR.error() 。 使用.done和.fail代替

Answer 2

嘗試這個

function setButtons() {
    $('#MyList > tbody  > tr').each(function () {
     var typeid  =  $(this).find("select").val();
     var that = this
     if (typeid != null ) {
      $.ajax({
            url: '/MyController/GetInfo',
            type: 'POST',
            data: {
                id: typeid
            }
        })
        .success(function (data) {
            var tr;
            if (data == null) {
                $(that).find("button#Details0").hide();
            } else {
                $(that).find("button#Details0").show();
            }
        })
    .error(function (jqXHR, textStatus) {
        alert("error");
    });
    }
    });

Answer 3

在jQuery ajax方法中，您可以添加一個稱為context的屬性。 干凈又容易。

....
$.ajax({
  url: '/MyController/GetInfo',
  type: 'POST',
  context: this, <---- add this
  data: {
      id: typeid
  }
})
....

相關： 如何訪問ajax成功回調函數中的$（this）