Javascript Ajax成功调用后更新span标记时出现问题

我在更新html文件中的span标记时遇到问题。我正在从服务器获取JSON对象，并在console.log中显示它。但当我尝试在AJAX中的span标记上更新它时：Success不起作用。如果我在success标签外调用同一行，它在那里确实有效

AJAX.JS

$('a.up_vote').click(function(e) {
          e.preventDefault();

          $(this).siblings("span").css( "background-color", "green" );

          $.ajax({
            url: $(this).attr('href'),
            type :'get' ,
            success : function (data){
              $(this).find("span").css( "background-color", "red" ); 
              $(this).siblings('span').html(data.count);
              $(this).siblings("span").css( "background-color", "red" );
            },
            failure : function (data){
              alert('failure') ; 
            }
          }) ;  // ajax call 

       }); // upvote link call

HTML

{{post.upvote}

$（此）

在成功回调中不再引用单击的项目

您必须直接引用它或使用临时变量，如：

var clickedItem = $(this); // before ajax call

然后在内部成功回调尝试

$（单击编辑项）

而不是

$（此）

我希望这对你有用；请让我知道

您对回调中使用“this”关键字有了很好的解释。

问题是您使用$（this）

一个简单的方法是存储对$（this）的引用，然后稍后使用它

例如：

$('a.up_vote').click(function(e) {
      e.preventDefault();
      window.alert("hello");
      console.log("hello there");

      var $that = $(this);

      $that.siblings("span").css( "background-color", "green" );

      $.ajax({
        url: $that.attr('href'),
        type :'get' ,
        success : function (data){
          // alert('success');
          console.log('hello from success ajax')
          console.log(data.count); 
          $that.find("span").css( "background-color", "red" ); 
          $that.siblings('span').html(data.count);
          $that.siblings("span").css( "background-color", "red" );
          // $('#upvote_count').html(data.count);
          console.log('siblings passed')
        },
        failure : function (data){
          alert('failure') ; 
        }
      }) ;  // ajax call 

   }); // upvote link call

$只是一个以$开头的变量名，并非特定于jquery本身，而是存储jquery对象（包括$（）包装的DOM元素，因为它们也是jquery对象）的变量的有用习惯

$that=$（this）是一个可以应用的有用模式，可以使用您想要的任何变量名

此外，当某些东西不起作用时，总是建议使用一个简单的控制台调用来检查关键变量

console.log('debug',$(this)); 

您只需点击F12并转到console选项卡（或者，如果没有任何事情发生，则用google搜索您的浏览器名+开发控制台），然后查看那里打印的内容（或者甚至使用断点或其他调试方法，请参阅链接）

调试链接

Chrome开发工具：

在Chrome中调试JS：

---

试试这个。

$（这个）成功的内在并不是你想象的那样。。。试着打印它。你也使用Angular JS吗？@Neron im使用Django请更新此线程，要么接受答案，要么通过评论或编辑提供详细信息，甚至自我回答为什么它不能回答你的问题。

console.log('debug',$(this)); 

$('a.up_vote').click(function (e) {
    e.preventDefault();

    $(this).siblings("span").css("background-color", "green");

    $.ajax({
        url: $(this).attr('href'),
        type: 'get',
        success: function (data) {
            $('a.up_vote').siblings("span").css("background-color", "red");
            $('a.up_vote').siblings('span').html(data.count);
        },
        failure: function (data) {
            alert('failure');
        }
    });  // ajax call 

}); // upvote link call