Question

我使用本地html页面来跟踪我发现了多少和什么闪光。如果之前的页面已满，我在创建一个单独的页面，其中包含新的口袋妖怪。

最近我一直在更改此系统，因此只使用了一个页面，它从json文件加载图像数据。 json中的每个口袋妖怪都有自己的id（例如：id 1，一直到id 30）：

{
    "images": {
        "P1": [
            {
                "id": "1", "name": "snubbull", "size": "small",
                "type": "fairy", "gender": "male_gender",
                "gen": "xy", "huntType": "Soft Resets",
                "lv": "5", "nickname": "none",
                "prevEvo": "none"
            },
            {
                "id": " 2", "name": "granbull", "size": "small",
                "type": "fairy", "gender": "male_gender",
                "gen": "xy", "huntType": "Soft Resets",
                "lv": "5", "nickname": "none",
                "prevEvo": "none"
            }
        ],
        "P2": [
            {
                "id": "1", "name": "zubat", "size": "small",
                "type": "poison_flying", "gender": "female_gender",
                "gen": "xy", "huntType": "Soft Resets",
                "lv": "5", "nickname": "none",
                "prevEvo": "none"
            },
            {
                "id": "2", "name": "golbat", "size": "small",
                "type": "poison_flying", "gender": "female_gender",
                "gen": "xy", "huntType": "Soft Resets",
                "lv": "5", "nickname": "none",
                "prevEvo": "none"
            }
        ]
    }

}

在上面的例子中，我把json缩短了一点，以防止这个页面变得超长。

＆＃34; P1＆＃34;代表Page 1和＆＃34; P2＆＃34;对于第2页（你明白了）。

我的问题是页面应该加载＆＃34; P1＆＃34;默认情况下，但是当我单击上一页或下一页按钮，卸载所有当前加载的图像并加载到下30张图像中（在这种情况下来自＆＃34; P2＆＃34;）。

<script src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript">

    var basePath = "sprites/"
    var baseExt = ".gif"
    function load(){
        $(document).ready(function () {
            var jsonURL = "db.json";
            $.getJSON(jsonURL, function (json){
                var imgList= "";
                    $.each(json.images.P1, function () {
                        imgList += '<a href="dexentries/' + this.name + '.html" target="prev_target"><img src= "' + basePath + this.gen + "ani/" + this.size + "/" + this.name + baseExt + '" class="RESIZER ' + this.gender + ' ' + this.type + '"></a>';
                    });
                $('.pkm_tile').append(imgList);
            });
        });
    }
    load()
        var requestedPage = 1;
        function switchPage(inp){
            if(inp==1){
                requestedPage++;
            }else if(inp==0){
                requestedPage--;
            }

            if(requestedPage >= 1){
                load();
            }else{
                alert("couldn't load page " + requestedPage);
                requestedPage = 1;
                load();
            }

        }


    </script>

所以计划是将执行图像的代码加载到一开始执行的函数中，但在按下上一页/下一页按钮时也会重新执行。

这里是按钮的代码：

<button class="backbutton" onclick="switchPage(0);"><p> ← Previous Page </p></button>
<button class="nextbutton" onclick="switchPage(1);"><p> Next Page→ </p></button>

除了在尝试低于第1页时显示警报外，这一切对我来说都没有效果。

如果有人知道怎么做，请告诉我，如果有人建议使用除了jquery之外的东西来加载json文件中的数据，我愿意尝试一下，只要我仍然可以使用json文件。

这是我在stackoverflow上的第一篇文章（我也没有在其他论坛上发布过很多问题），如果它有点长就很抱歉。

最后一点：我注意到加载的页面只在firefox中加载。当我在Google Chrome中加载它时，它甚至不会显示第1页。

我对jquery，json文件和JavaScript（在html页面上）也很陌生，所以你可能会看到一些＆＃34; nooby＆＃34;错误：P

从json文件将一组图像加载到html页面上，但切换到来自同一json的不同图像集

0 个答案: