通过单击按钮从json文件加载数据和图像，然后按钮消失

Question

任何人都知道如何点击“加载更多”按钮，其他项目应加载到现有项目下方，“加载更多”按钮应该消失。应从提供的JSON文件（numbers.json）加载其他项目。

[
    {
        "itemClass":"apps col-xs-6",
        "image_src": "images/1.png",
        "title": "One"
    },
    {
        "itemClass": "web col-xs-6",
        "image_src": "images/2.png",
        "title": "Two"
    },
    {
        "itemClass": "icons col-xs-6",
        "image_src": "images/3.png",
        "title": "Three"    
    }
]

Answer 1

$(document).ready(function () {
    $('#load-more').click(function() {

        $.getJSON( "numbers.json", function( data ) {
            console.log(data);
            var items = [];
            $.each( data, function( key, val ) {
                items.push( "<li id='" + key + "'>" + val + "</li>" );
            });

            $( "<ul/>", {
                "class": "my-new-list",
                html: items.join( "" )
            }).appendTo( "body" );

        });

        $(this).remove();
    });
});

在上面的代码中，load more按钮（id =“load-more”）从json文件中获取数据并将其添加到html中，然后在加载json后删除按钮本身。