代码之家 › 专栏 › 技术社区 › Mohamad

jQuery选择器$(this)未按预期工作

jquery

Mohamad · 技术社区 · 14 年前

提交ajax请求时,我希望在发送之前切换类,在出错时切换回类,或者在一切正常时保留类。但是 $(this) 选择器似乎不起作用,我不知道为什么。我正在使用jQuery 1.4.3。

html格式

<a class="vote-down vote-down-112 state-3" data-postid="112" data-voteid="6">down</a>

js公司

$('.vote-down').click(function() {
    var voteData = '&postId=' + $(this).data('postId') + '&voteId=' + $(this).data('voteid');
    $.ajax({
        dataType: 'script',
        url: "myURL" + "?format=js" + voteData,
        error: function(XMLHttpRequest, textStatus, errorThrown) { $(this).toggleClass("status-3"); },
        beforeSend: function(XMLHttpRequest) { $(this).toggleClass("status-3"); }
    });
    return false;
});

2 回复 | 直到 14 年前

Nick Craver 14 年前

this 默认情况下是指 ajax 对象本身,如果需要 这 具体来说,使用 context option 设置什么 这 在你的回拨中,像这样:

$('.vote-down').click(function() {
  var voteData = '&postId=' + $(this).data('postId') + 
                 '&voteId=' + $(this).data('voteid');
  $.ajax({
     context: this,
     dataType: 'script',
     url: "myURL" + "?format=js" + voteData,
     error: function() { $(this).toggleClass("status-3"); },
     beforeSend: function() { $(this).toggleClass("status-3"); }
  });
  return false;
});

我删除函数参数只是为了清理,如果不使用它们,就不需要它们。

Harmen 14 年前

常见的错误。 this 引用XHR请求,而不是元素:

$('.vote-down').click(function() {
  var that = this; // save a reference to the element;

  $.ajax({
    dataType: 'script',
    url: "myURL" + "?format=js" + voteData,
    error: function() {
      $(that).toggleClass("status-3");
    },
    beforeSend: function() { 
      $(that).toggleClass("status-3");
    }
  });

  return false;
});

这是因为jQuery调用error和beforeSend函数,如下所示: userfunction.apply( xhr[, args] ); ,这使得 这 关键字引用XHR。