jQuery选择器$(此)不按预期工作

Question

在提交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;
}); 

Answer 1

默认情况下，this是指ajax对象本身，如果希望this是特定的，请使用context option设置回调中的this，如下所示：

$('.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;
}); 

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

Answer 2

常见的错误。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调用错误和beforeSend函数，如：userfunction.apply( xhr[, args] );，这使得this关键字引用XHR。