Question

我编写了一个脚本来加载带有JSON请求的视频以提高性能，但我无法让它正常工作。奇怪的是console.log（currentvid1）返回正确的值，但该函数一直说currentvid1未定义。

我猜诀窍应该是部分代码的顺序，但是在尝试移动它们之后我就更加困惑了。这是当前状态下的代码：

$(document).ready(function(){
    var videosArr = [];
    var vidIndex = 0;

    $.getJSON("js/videos.json", function(data) {
        $.each( data, function( key, val ) {
            videosArr.push('<iframe width="315" height="236" src="'+val+'" frameborder="0" allowfullscreen></iframe>');
        });

        var currentvid1 = videosArr[vidIndex];
        var currentvid2 = videosArr[vidIndex+1];
        var currentvid3 = videosArr[vidIndex+2];

        $('#showmorebtn').click(function(){
            if (currentvid1.length > 0 && currentvid2.length > 0 && currentvid3.length > 0){
                $('#inputvids').append(currentvid1 + currentvid2 + currentvid3);
                vidIndex += 3;
            }else if(currentvid1.length > 0 && currentvid2.length > 0 && currentvid3.length == 0){
                $('#inputvids').append(currentvid1 + currentvid2 + currentvid3);
                $('#showmorebtn').remove();
            }else if(currentvid1.length > 0 && currentvid2.length == 0){
                $('#inputvids').append(currentvid1);
                $('#showmorebtn').remove();
            }else if(currentvid1.length > 0){
                $('#inputvids').append(currentvid1);
                $('#showmorebtn').remove();
            }else if(currentvid1.length == 0){
                $('#showmorebtn').remove();
            }
        });
    });

});

可能这段代码并不像我以前尝过的那些代码那样接近正确，但无论如何......我只需要用JSON弄清楚逻辑......

PS：此外，代码可能看起来非常长。我需要每次点击只加载3个或更少的视频。我想它可以写得更好，但只有在我弄清楚为什么变量返回undefined之后我才会研究它。

编辑：顺便说一句，整个代码都在$（document）.ready函数内。我已相应更改了代码。

Answer 1

最好的解决方案不仅是打破你的函数范围（你定义的变量在函数之外不可用），还要记住getJSON是异步的，不会立即返回结果。

我的建议：在getJSON响应中附加点击处理程序：

编辑：既然你添加了你并不总是有3个视频，我为你简化了：现在它会检查视频是否存在并附加如果是真的，否则它被省略。

var videosArr = [];
var vidIndex = 0;

$.getJSON("js/videos.json", function(data) {
    $.each( data, function( key, val ) {
        videosArr.push('<iframe width="315" height="236" src="'+val+'" frameborder="0" allowfullscreen></iframe>');
    });

    var currentvid1 = videosArr[vidIndex];
    var currentvid2 = videosArr[vidIndex+1];
    var currentvid3 = videosArr[vidIndex+2];

    $('#showmorebtn').click(function(){
        if (currentvid1 && currentvid2 && currentvid3){
            $('#inputvids').append(currentvid1 + currentvid2 + currentvid3);
            vidIndex += 3;
        }else if(currentvid1 && currentvid2){
            $('#inputvids').append(currentvid1 + currentvid2);
            $('#showmorebtn').remove();
        }else if(currentvid1){
            $('#inputvids').append(currentvid1);
            $('#showmorebtn').remove();
        }else {
            $('#showmorebtn').remove();
        }
    }); 
});

当您多次点击时，您的代码的更好版本实际上会起作用：（全局变量现在是功能范围的，本地人被删除了，vidIndex更新实际上对点击进行了更改 - 旧脚本只是一次又一次地附加三个下一个视频）

$.getJSON("js/videos.json", function(data) {
    var videosArr = [];
    var vidIndex = 0;

    $.each( data, function( key, val ) {
        videosArr.push('<iframe width="315" height="236" src="'+val+'" frameborder="0" allowfullscreen></iframe>');
    });

    $('#showmorebtn').click(function(){
        if (videosArr[vidIndex] && videosArr[vidIndex+1] && videosArr[vidIndex+2]){
            $('#inputvids').append(videosArr[vidIndex] + videosArr[vidIndex+1] + videosArr[vidIndex+2]);
            vidIndex += 3;
        }else if(videosArr[vidIndex] && videosArr[vidIndex+1]){
            $('#inputvids').append(videosArr[vidIndex] + videosArr[vidIndex+1]);
            $('#showmorebtn').remove();
        }else if(videosArr[vidIndex]){
            $('#inputvids').append(videosArr[vidIndex]);
            $('#showmorebtn').remove();
        }else {
            $('#showmorebtn').remove();
        }
    }); 
});

变量在控制台中返回正确的值，但未定义

1 个答案: