javascript - 在 jQuery 中获取 JSON onClick

Question

<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 获取的缩略图？

Answer 1

可以获取数据并持久化到一个变量中，然后按需显示。

$(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();
    }); 
});