Turn.js 和 AJAX 集成答案

【问题标题】：Turn.js & AJAX IntegrationTurn.js 和 AJAX 集成
【发布时间】：2021-12-15 00:16:39
【问题描述】：

我一直在研究 turn.js，但没有找到任何关于通过 ajax 加载带有内容的动态页面的示例，页面正在加载，但不是所有结果 json result from controller

<div class="sample-flipbook" id="BookViewer">
            <div id="book-js" class="text-center">
                <div class="hard">
                    <img src="~/Theme/OtherAssets/Images/temp-img.jpg" class="img-fluid" style="width:100%; height:100%">
                </div>
                <div class="hard"></div>
                <div id="Page-Loader"></div>
                <div class="hard"></div>
            </div>
        </div>


<script type="text/javascript">
    $(document).ready(() => {
        $('#book-js').turn({
            width: 900,
            height: 600,
            autoCenter: true
        });
    });
    function LoadBook(HBID, ChapterNo, TableRef) {
        $.ajax({
            url: '@Url.Action("GetData", "Books")',
            type: "GET",
            data: { HadithBookID: HBID, ChapterNo: ChapterNo, TableRefNo: TableRef },
            success: (response) => {

                console.log(response.length);
                for (var i = 0; i < response.length; i++) {
                    var Html = "<div>";
                    Html += '<p class="urdu-font-fm container-fluid mt-3">' + response[i].ArabicText+'</p>';
                    Html += '<p class="container-fluid">' + (response[i].EnglishText != null ? response[i].EnglishText == null : "") + '</p>';
                    Html += '<p class="urdu-font-fm container-fluid">' + response[i].UrduText+'</p>';
                    Html += '<p class="urdu-font-fm container-fluid">' + (response[i].Language1  != null ? response[i].Language1  == null : "") + '</p>';
                    Html += "</div>";

                    $('#Page-Loader').html(Html);
                }
            },
            error: (response) => { console.log(response); }
        });
    }
</script>

【问题讨论】：

$('#Page-Loader').html(Html);这行不行吗？
这条线正在工作，并且在页面上仅加载 1 个数组元素，但我需要每个数组结果的页面
我已经更改了代码，现在它显示了所有页面，但是覆盖了第一页和最后 2 个封面。
不懂覆盖第一页和最后一页？
很抱歉传错了，Cover page乍一看还可以，但是从js绑定页面后，cover page已经被.turn('addPage')去掉了

标签： javascript jquery ajax asp.net-mvc turn.js

【解决方案1】：

你必须改变

$('#Page-Loader').html(Html);

这一行到

$('#Page-Loader').append(Html);

如果在循环中使用它来获取输出结果中的所有 html。现在令人高兴的是，每次循环完成后，您以前的 html 都会被新的 html 替换。

【讨论】：