在jQuery中获取JSON onClick

<script> 
     var twitchApi = "https://api.twitch.tv/kraken/streams"; 
     $.getJSON(twitchApi, function (json) { 
     for (var i = 0; i < 9; i++) { 
     var streamGame = json.streams[i].game; 
     var streamThumb = json.streams[i].preview.medium; 
     var streamVideo = json.streams[i].channel.name; 
     <!-- var streamViewers = json.streams[i].streamViewers; --> 
     $('#twitch').append('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"></img>'); 
    } 
}); 
</script>

所以我有这段代码。我想让它在点击图片或按钮时获取9个流预览。我怎样才能做到这一点？有人可以为我修复代码吗？另外，如何编辑从JSON获取的缩略图？在jQuery中获取JSON onClick

来源

2016-05-17 JohnDotHR

结合元件的像'$点击事件（函数（）{$（ '＃yourbuttonid'）上单击（函数（）{// 你的上面的代码 }）; }）;' – Satpal

@Satpal像这样？ http://pastebin.com/fw1pCzDM如果是的话，它不工作..我希望页面打开后立即显示9个缩略图，然后如果你想要，你可以点击按钮加载9个。 – JohnDotHR

您可以获取数据并保存在一个变量中，然后按需显示。

$(function() { 
    //varianles 
    var i=0; 
    var twitchApi = "https://api.twitch.tv/kraken/streams"; 
    var twitchData; 
    //Get data from API and store it in variable 
    $.getJSON(twitchApi, function(json) { 
     twitchData = json.streams; 

     //Set upon page load 
     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 streamViewers = twitchData[i].streamViewers; --> 
      $('#twitch').append('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"></img>'); 
     } 
    }  

    //Bind click handlers 
    $('#button').click(function() { 
     setData(); 
    }); 
});

来源

2016-05-17 11:10:26 Satpal

在jQuery中获取JSON onClick

回答

相关问题