Question

我正在构建一个自定义的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将它们组合在一起，并使用$（this）来使用相对对象。

我怀疑问题是在.get中使用$（this）但是我不确定并且不知道如何修复它。

Answer 1

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

要解决此问题，您可以：

向回调函数添加.bind(this)。函数内部无需更改。

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

或者在this之前将引用保存到$.getJSON并在回调中使用它。

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

});

希望有所帮助

不能在.each中的$ .getJSON中使用$（this）

1 个答案: