call为活动选项卡加载更多功能

时间:2017-05-16 21:47:54

标签: javascript jquery

我正在尝试为特定选项卡窗格(在本例中为活动选项卡窗格)开发更多加载功能。我遇到了这个jquery函数的问题,因为我在所有选项卡的末尾调用了更多的负载,而在我的JS函数中,我无法弄清楚如何在激活的窗格之后加载,其中按钮是点击。这样我就会在最后一个窗格中继续加载问题,但是如果没有var lastItem = $('div.question-col .question-summary:last');

我就无法打印
$(document).ready(function () {
    $(".load-more").on('click', function (e) {
        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));
        });
        $(this).data('next-page', parseInt(next_page) + 1);
    });

    siteStats();
});

function addNewQuestions(objects) {

    $.each(objects, function (i, object) {
        console.log(object);
        var lastItem = $('div.question-col .question-summary:last');
        var newLine = lastItem.clone(true);

        var newObject = newLine.find('.question-info');

        updateTitleAndLink(newObject.find('.summary a'), object);
        updateCreationDate(newObject.find('.question-updated-at'), object);
        updateQuestionAnswers(newObject.find('.question-answers'), object);
        updateAnswerCount(newObject.find('.answers-count'), object);
        updateViewsCount(newObject.find('.views-count'), object);
        updateVotesCount(newObject.find('.votes-count'), object);
        updateSolvedStatus(newObject.find('.status'), object)

        lastItem.after(newLine);
    });
}

我想,更新功能与此案例无关。

<div id="tabs" class="tab-content">
                    <ul>
                        <li><a href="#recent_questions">Recent Questions</a></li>
                        <li><a href="#unanswered_questions">Unanswered Questions</a></li>
                        <li><a href="#top">Top Scored Questions</a></li>
                    </ul>
                    {if empty($recent_questions)}
                        <div class = "col-sm-12" style = "text-align: center"><strong>No questions to load!</strong></div>
                    {/if}
                    {if !empty($recent_questions)}
                        <div id="recent_questions" class="question-col">
                            <!-- Questions come here -->

                            <div class = "load-more"
                                 data-next-page = "1"
                                 data-url = "{url('controller/api/questions/load_more_questions')}"
                                 data-tab = "recent_questions">
                                <a id="loadMore">
                                    Load More...
                                </a>
                            </div>
                        </div>
                    {/if}

                    <div id="unanswered_questions">
                        <!-- Questions come here -->

                        <div class = "load-more"
                             data-next-page = "1"
                             data-url = "{url('controller/api/questions/load_more_questions')}"
                             data-tab = "unanswered_questions">
                            <a id="loadMore">
                                Load More...
                            </a>
                        </div>
                    </div>
                    <div id="top">
                        <!-- Questions come here -->

                        <div class = "load-more"
                             data-next-page = "1"
                             data-url = "{url('controller/api/questions/load_more_questions')}"
                             data-tab = "top_scored_questions">
                            <a id="loadMore">
                                Load More...
                            </a>
                        </div>

                    </div>

//Questions come here - 问题模板

<div class="question-summary narrow">

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

        <div class="votes">
            <div class="votes-count">
                <span title="{$question['votes_count']} 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="answers-count">
                <span title="{$question['answers_count']} answer">{$question['answers_count']}</span></div>
            <div>answer</div>
        </div>
        <div class="views">
            <div class="views-count">
                <span title="{$question['views_counter']} views">{$question['views_counter']}</span></div>
            <div>views</div>
        </div>

        <div class="summary question-title">
            <h3>
                <a href="{questionUrl($question['publicationid'])}"
                   data-base-question-url = "{questionUrl('')}"
                   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>

我的问题是:有没有办法将我加载的内容放在活动窗格的最后一项之后?

亲切的问候

0 个答案:

没有答案