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中获取值，并从控制器接收数据。我怀疑问题可能在于使用＆＃34;这个＆＃34;在Ajax脚本中。非常感谢您的建议。

Answer 1

您需要将$(this)分配给变量，以便可以在成功函数中使用

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
  }
})
....

相关：how to access the $(this) inside ajax success callback function

Jquery每个表 - 使用Ajax隐藏节目

3 个答案: