Javascript 如何在每次单击时从ajax/json附加3个元素

我对json响应和将数据部分附加到html有问题

我的json现在有15个元素，但将来会有更多

现在，我用json文件中的ajax附加每个元素

我想在单击时从JSON中添加3个元素

我尝试使用for循环代替$。每次单击，但效果不好

我的代码：

    $(document).ready(function() {

    var $itemsList = $("#items-list");

        $.ajax({
        url: 'items.json',
        type: 'GET',
        dataType: 'json',
        success: function(items){
            $("#more-items").on('click', function() {
                $.each(items, function(i, item) {

                    /*INCLDE ITEM BOXES*/
                    $itemsList.append(
                        '<div class="col-md-4 col-sm-6 item">' +
                            '<a href="#'+ item.id +'" class="item-link" data-toggle="modal">' +
                                '<div class="item-hover">' +
                                    '<div class="item-hover-content">' +
                                        '<i class="fa fa-search-plus fa-3x"></i>' +
                                    '</div>' +
                                '</div>' +
                                '<img src="'+ item.thumbnailUrl +'" class="img-responsive" alt="">' +
                            '</a>' +
                            '<div class="item-caption">' +
                                '<p class="text-muted">'+item.caption+'</p>' +
                            '</div>' +
                        '</div>'
                    );

                    /*INCLUDE ITEM MODALS*/
                    $('body').after().append(
                        '<div class="item-modal modal fade" id="'+item.id+'" tabindex="-1" role="dialog" aria-hidden="true">'+
                            '<div class="modal-content">'+
                                '<div class="close-modal" data-dismiss="modal">'+
                                    '<div class="lr">'+
                                        '<div class="rl">'+
                                        '</div>'+
                                    '</div>'+
                                '</div>'+
                                '<div class="container">'+
                                    '<div class="row">'+
                                        '<div class="col-lg-8 col-lg-offset-2">'+
                                            '<div class="modal-body">'+
                                                '<h3>'+item.title+'</h3>'+
                                                '<p class="item-intro text-muted">'+item.subtitle+'</p>'+
                                                '<img class="img-responsive img-centered" src="'+item.imgUrl+'" alt="">'+
                                                '<a class="btn btn-info item-link" target="_blank" rel="nofollow" href="'+item.link+'"><i class="fa fa-arrow-right"></i> Zobacz online</a>'+
                                                '<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Zamknij</button>'+
                                            '</div>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                        '</div>'
                    );
                });
            });
        }
        })
        .done(function() {
            console.log('items import done!');
        })
        .fail(function() {
            console.log("error");
        });

});

$（文档）.ready（函数（）{
var$itemsList=$（“#项目列表”）；
$.ajax({
url:'items.json'，
键入：“GET”，
数据类型：“json”，
成功：功能（项目）{
$（“#更多项”）。在（'click'，function（）上{
$。每个（项目，功能（i，项目）{
/*包括项目箱*/
$itemsList.append(
'' +
'' +
'' +
“
”+项标题+”
'+
'' +
''
);
/*包含项模态*/
$（'body'）.after（）.append(
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+项目.标题+''+
“
”+item.subtitle+”
'+
''+
''+
“Zamknij”+
''+
''+
''+
''+
''+
''
);
});
});
}
})
.done（函数（）{
log（'items import done！'）；
})
.fail（函数（）{
控制台日志（“错误”）；
});
});

---

感谢大家提供的建议和示例。

不相关，但您有一个success and done函数。success被弃用为。done我看到的第一个问题是您有：$（“#更多项”）。on（'click'，function（）{”这是在ajax成功函数中添加事件处理程序。我看不出任何附加内容。您需要将事件处理声明完全移出此方法……我建议您对服务器端进行编码。将所需下一项的索引传递给服务器端代码。让它生成json文件仅获取接下来的3个项目。然后，您可以将所有项目附加到页面，而页面只会添加3个项目。您可以使用变量跟踪下一个索引。