コンソールはvarが定義されていないことを返しますが、

Question

です。このコードを基本的に持っています。divをクリックすると、段落が読み込まれ、twitch api urlに挿入されます。スクリプトは動作しているはずですが、何が起こるかは、fadeOutの後にdivが空のままであることです。コンソールは、twitchDataが定義されていないエラーを返しますが、それはエラーです。 だから、これは次のように動作するはずです：divをクリック - divがクリックされたことを理解しました - < fadeOut + empty（）div - >段落テキストを取得 - > twitchApiリンクなどで置き換えます。

$('.games > div').click((e) => { 
    var gameDiv = $(this); // Get which div was clicked here 
    $('#twitch').children().fadeOut(500).promise().then(function() { 
     $('#twitch').empty(); 
     $(function() { 
      var i = 0; 
      var gameName = $(e.target).text().replace(' ', '%20'); // Get the game name 
      console.log(gameName); 
      var twitchApi = "https://api.twitch.tv/kraken/streams?game=" +gameName; // Build the URL here 
      var twitchData; 
      $.getJSON(twitchApi, function(json) { 
       twitchData = json.streams; 
       setData() 
      }); 
     }); 

     function setData() { 
      var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length; for (; i < j; i++) { 
       var streamGame = twitchData[i].game; 
       var streamThumb = twitchData[i].preview.medium; 
       var streamVideo = twitchData[i].channel.name; 
       var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>'); 
       $('#twitch').append(img); 
       img.click(function() { 
        $('#twitch iframe').remove() 
        $('#twitch').append('<iframe style="width: 600px;" src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>'); 
       }); 
      } 
     } 
     $('#load').click(function() { 
      setData(); 
     }); 
    }); 
}); 

Answer 1

これは範囲の問題です。 setData関数に 'twitchData'を渡す必要があります。今はクリックイベント内でのみ定義されています。

$('.games > div').click((e) => { 
    var gameDiv = $(this); // Get which div was clicked here 
    $('#twitch').children().fadeOut(500).promise().then(function() { 
     $('#twitch').empty(); 
     $(function() { 
      var i = 0; 
      var gameName = $(e.target).text().replace(' ', '%20'); // Get the game name 
      console.log(gameName); 
      var twitchApi = "https://api.twitch.tv/kraken/streams?game=" +gameName; // Build the URL here 
      $.getJSON(twitchApi, function(json) { 
       setData(json.streams) 
      }); 
     }); 

     function setData(twitchData) { 
      var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length; for (; i < j; i++) { 
       var streamGame = twitchData[i].game; 
       var streamThumb = twitchData[i].preview.medium; 
       var streamVideo = twitchData[i].channel.name; 
       var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>'); 
       $('#twitch').append(img); 
       img.click(function() { 
        $('#twitch iframe').remove() 
        $('#twitch').append('<iframe style="width: 600px;" src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>'); 
       }); 
      } 
     } 
    }); 
});