0

もっと読んでもっと研究をすることにしたので、まだこの質問をしないことを望んでいましたが、現時点ではあまり進んでいません.

これは私のコードです:

function listPosts(data) {
    var $count = data.count;
    var limitposts = 5;
    var $output = $('<ul class="posts" data-role="listview" data-filter="true">')
    $.each(data.posts,function(i, val) {
        console.log(i);
        if (i<limitposts && i>=0) {
    var $post = $('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>');
    $output.append($post).appendTo('#postlist');
        i++;
   // return (i !== 4);
}});

}

HTML

<!-- Page: home -->
    <div id="home" data-role="page" data-theme="d" data-title="My first App">
        <div data-role="listview">
            <a href="#devotion" id="devotionclick" data-role="button">Display Messages</a>
        </div><!-- links -->
    </div><!-- page -->

    <div id="devotion" data-role="page" data-title="My first App">
        <div data-role="header" data-theme="a" data-position="fixed"> <h2>Devotional Messages</h2></div><!-- header -->
        <div data-theme="d" data-role="listview" id="postlist"> </div><!-- content -->
        <div class="addMorePosts">Load More Posts...</div> 
    </div><!-- page -->

<script src="http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=listPosts" type="text/javascript"></script>

最初に、Return ステートメントを使用して、表示される投稿の数を制限しました。ボタンのクリックで表示される投稿の数を増やすことができるかどうかを確認するために、これを For ステートメントに変更しました。

この段階で、使用するのに最適なロジックを見つけようとしています。これを達成するために別の関数を追加しようとしましたが、うまくいきません。まだ読んで研究していますが、ガイダンスや良い例を期待していました

4

1 に答える 1

0 
function addMorePosts ( data, offset, amount ) {

    var $postsList = $('#postlist'),
        posts = data.slice(offset, amount);

    $.each(posts, function ( index, post ) {

        $postsList.append(
            '<li>' +
                '<h3>' + post.title + '</h3>' +
                '<p>' + 
                    post.excerpt + 
                    '<a href="#devotionpost" onclick="showPost(' + post.id + ')"></a>' +
                '</p>' +
            '</li>'
        );

    });

}

JSFiddle: http://jsfiddle.net/V4Ucv/2/

于 2013-10-17T21:55:34.287 に答える