Question

我在Twitch API中查询我的数据库中的用户列表，看看他们是否在线。

我基本上将它们全部列出，“display：none”然后取消隐藏，如果在线：

  $('.online_list').each(function (index) {
      var tnick = $(this).data('tnick');
    $.getJSON("https://api.twitch.tv/kraken/streams?client_id={:twitch_key}&channel="+tnick+"", function(a) {
      if (a["streams"].length > 0)
      {
        alert(tnick);
        $(this).show();
        console.log(index + ": " + $( this ).text());
      }
    });
  });

在我的测试中，alert(tnick)完美无缺，所以我知道它正在运行。问题是$(this).show();无效。

以下是HTML示例：

<div class="online_list" data-tnick="test" style="display: none;">test:<a href="https://www.twitch.tv/test">Twitch</a> <span>(Online)</span></div>
<div class="online_list" data-tnick="test2" style="display: none;">test2:<a href="https://www.twitch.tv/test2">Twitch</a> <span>(Online)</span></div>

Answer 1

this是当前的范围对象！

要修复您的代码，您可以执行以下操作：

$('.online_list').each(function (index) {
    var $that = $(this); // create a temp var that
    var tnick = $that.data('tnick');
    $.getJSON("https://api.twitch.tv/kraken/streams?client_id={:twitch_key}&channel="+tnick+"", function(a) {
      if (a && a["streams"] && a["streams"].length > 0) {
        alert(tnick);
        $that.show(); // use that instead of this
        console.log(index + ": " + $that.text());
      }
    });
  });

查看此资源，了解有关范围和范围的更多信息。这个：http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/

Answer 2

编辑：

另外，就像@djxak建议的那样，你可以使用回调的element参数，在我看来这更简单干净。

@djxak建议：

  $('.online_list').each(function (index, element) {
      //... (scope1 code)
      $.getJSON("", function(a) {
          //... (scope2 code)
          $(element).show();
      });
  });

我的方法：

  $('.online_list').each(function (index) {
      //... (scope1 code)
      var $current = $(this);
      $.getJSON("", function(a) {
         //... (scope2 code)
        $current.show();
      });
  });

有关jQuery文档中每个函数和element参数的信息：https://api.jquery.com/each/#each-function

jquery无法使用此选择器获取div

2 个答案: