Question

我正在尝试使用Javascript调用使用PHP完成的API来开发Load-More按钮。到现在为止还挺好。我可以在范围i += i + 4中加载新对象（每次按下按钮时我都会加载三条新注释）。

这是我的加载按钮：

$(document).ready(function () {
    $(".load-more").on('click', function () {
        var tab = $(this).data('tab');
        var next_page = $(this).data('next-page');
        console.log(next_page);
        console.log(tab);
        $.get($(this).data('url') + '?tab=' + tab + '&page=' + next_page, function (data) {
            addNewQuestions($.parseJSON(data));
        });
    });
});

对于每个加载的对象，我想打印每个html块。

<div class="question-summary narrow">

    <div class="col-md-12">

        <div class="votes">
            <div class="mini-counts"><span title="7 votes">
                    {if $question['votes_count']}
                        {$question['votes_count']}
                    {else}
                        0
                    {/if}
                    </span></div>
            <div>votes</div>
        </div>
        <div {if $question['solved_date']}
            class="status answered-accepted"
        {else}
            class="status answer-selected"
        {/if}
                title="one of the answers was accepted as the correct answer">
            <div class="mini-counts"><span title="1 answer">{$question['answers_count']}</span></div>
            <div>answer</div>
        </div>
        <div class="views">
            <div class="mini-counts"><span title="140 views">{$question['views_counter']}</span></div>
            <div>views</div>
        </div>

        <div class="summary">
            <h3>
                <a href="{questionUrl($question['publicationid'])}" class="question-title" style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
                    {$question['title']}
                </a>
            </h3>
        </div>


        <div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
            <span>
                <i class = "glyphicon glyphicon-time"></i>
                <span class="question-updated-at">{$question['creation_date']}</span>
            </span>
            <span>
                <i class = "glyphicon glyphicon-comment"></i>
                <span class="question-answers">{$question['answers_count']}</span>
            </span>
        </div>
    </div>

</div>

问题在于我有几个条件，因为{if$question['votes_count']}而且我很难挣扎，因为我不知道在渲染html时如何获取这些变量。

然后我找到了一些东西，但我无法弄清楚如何适应我的情况

关于那个addNewQuestions我认为一个好的方法是：

function addNewQuestions(objects) {

    $.each(objects, function (i, object) {
        console.log(object);
        var lastItem = $('div.active[role="tabpanel"] .question-line:last');
        var newLine = lastItem.clone(true);

        var newObject = newLine.find('.question-col:eq(' + i + ')');

        newObject.find('.question-info-container').attr('data-id', object.publicationid);
        newObject.find('.vote-count').html(object.votes);
        updateTitleAndLink(newObject.find('.question-title'), object);


        lastItem.after(newLine);
    });
}

function updateTitleAndLink(questionTitle, object) {
    questionTitle.attr('href', questionTitle.data('base-question-url') + object.publicationid);
    questionTitle.html(object.title);
}

但没有任何反应，我无法弄清楚原因。

有任何想法或建议吗？

亲切的问候

加载更多按钮JS - 在页面上加载新内容

0 个答案: