无法在$ .getJSON中使用$（this）.each

Question

Im构建自定义的Minecraft服务器状态并出现问题。第一个版本是成功的，但代码相当长，我决定做得更好，更短。脚本应该填充每个.server的元素，但它不起作用。

<div class="server_status"> 
    <div class="container servers_info"> 
    <h1>My Network</h1> 
    <div id="of the server" class="server" title="of the server" server-ip="0.0.0.0"> 
     <div class="name"></div> 
     <div class="count"><i class="fa fa-spinner fa-spin"></i></div> 
     <div class="players">Loading player data <i class="fa fa-spinner fa-spin"></i></div> 
     <div class="status"></div> 
    </div> 
    <div id="of the server" class="server" title="of the server" server-ip="0.0.0.0"> 
     <div class="name"></div> 
     <div class="count"><i class="fa fa-spinner fa-spin"></i></div> 
     <div class="players">Loading player data <i class="fa fa-spinner fa-spin"></i></div> 
     <div class="status"></div> 
    </div> 
    <!-- ..... more servers --> 
    <span class="total"><i class="fa fa-spinner fa-spin"></i></span> 
</div> 

---

$(document).ready(function ping() { 
    $(".servers_info .server").each(function() { 
    var name = $(this).attr("title"); 
    var ip = $(this).attr("server-ip"); 
    var id = $(this).attr("id"); 
    var total = 0; 
    var call = "Get Avatar List adress"; 

//Set the name:  
    $(".name",this).html(name);   
//Gets the data:  
    $.getJSON("http://mcapi.ca/v2/query/info/?ip=" + ip, function (json) { 
//Checks The status and applies visual effects:  
     if (json.status !== "false") { 
      $(".status",this).html("<span class=\"l-online\">" + json.ping + " ms</span>"); 
      $(this).removeClass('blur'); 
     } else { 
      $(".status",this).html("<span class=\"l-offline\">0 ms</span>"); 
      $(this).addClass('blur'); 
     }; 
    }); 
    }); 
    //Sets Refresh rate of 10s 
    setTimeout(ping, 10000); 
}); 

我缩小了问题的$.getJSON部分。数据被正确检索但不能放在其各自的DIV中。与第一版脚本的唯一区别在于，我为每个想要显示的服务器分别使用了4个getJSON。现在使用.each为它们中的所有4个和$（this）使用相对对象进行组合。

我怀疑问题是在.get中使用$（this），但我并不确定，也不知道如何解决它。

Answer 1

正如您怀疑的那样，问题是$（this）。部分。在$.getJSON回调内部this不再引用触发事件的DOM对象。

为了解决这个问题，您可以：

添加.bind(this)回调函数。函数本身内部不需要更改。

$.getJSON(url, function(json) { 
    /* all your code here */ 
    }.bind(this) 
); 

或者$.getJSON之前保存的参考this，并用它回调里面。

var _this = this; 
$.getJSON(url, function(json) { 
    /* replace all references of this to _this for example*/ 
    $(_this).removeClass('blur'); 

}); 

希望帮助