0

私が取り組んでいるこのコードで2つのことを達成したいので、質問を分離するかどうかはわかりません:

JS:

function listPosts(data) {
    postlimit = 
    var output='<ul data-role="listview" data-filter="true">';
    $.each(data.posts,function(key,val) {   

        output += '<li>';
        output += '<a href="#devotionpost" onclick="showPost(' + val.id + ')">';
        output += '<h3>' + val.title + '</h3>';
        output += '<p>' + excerpt + '</p>';
        output += '</a>';
        output += '</li>';
    }); // go through each post
    output+='</ul>';
    $('#postlist').html(output);
} // lists all the posts

質問:

1: 返される動的リスト投稿の数を 8 に制限したい

2: 表示される項目を制限しながら、下部に「さらに...」というテキストを追加して、既に表示されているリストに 8 つの項目の別のセットが追加されるようにします。

私はすでにいくつかのコードを試していますが、いくつかのガイダンスを得ることを望んでいました

4

2 に答える 2

1

私は純粋な論理と論理の実装に基づいてあなたに答えています。そのための API があるかもしれませんが、私にはよくわかりません。第二に; jQuery の使用に問題がない場合は、jQuery プラグインを見つけることをお勧めします。

htmlアイテム onMoreClick()をクリックしたときに関数を呼び出すMore...

  var end = 8;
  var start = 1;

  function onMoreClick()
  {
     start = end 
     end = end+8;
     listPosts(data)
  }

  function listPosts(data) {
    postlimit = 
    var output='<ul data-role="listview" data-filter="true">';
    var i = start;
    $.each(data.posts,function(key,val) {   
        if(i<end && i >=start){
        output += '<li>';
        output += '<a href="#devotionpost" onclick="showPost(' + val.id + ')">';
        output += '<h3>' + val.title + '</h3>';
        output += '<p>' + excerpt + '</p>';
        output += '</a>';
        output += '</li>';
        i++;
       }
    }); // go through each post
    output+='</ul>';
    $('#postlist').html(output);
} // lists all the posts
于 2013-10-14T15:40:26.173 に答える
1 
function listPosts(data, postlimit) {
    var $output = $('<ul class="posts" data-role="listview" data-filter="true">');

    $.each(data.posts,function(key, val) {   
        $("<li>", {id: "post_" + val.id})
            .append([
                $("<h3>", {text: val.title}),
                $("<p>", {text: val.excerpt})
            ])
            .appendTo($output);

        return (postlimit-- > 1);
    });

    $('#postlist').empty().append($output);
}

// exemplary delegated event handler
$(document).on("click", "ul.posts h3", function () {
    $(this).show();
});

後で ...

listPosts(data, 8);

ノート：

  • から$.each()戻るtrueか、またはfalse。を返すfalseと、ループが停止します。
  • 連結された文字列から HTML を構築しないようにしてください。これは、簡単に回避できる XSS 脆弱性になりがちです。jQuery は、HTML を安全に構築するためのツールを提供します。
  • 一般に、同じ理由で.html()、特に使用する DOM 要素が既にある場合は、 を使用しないようにしてください。
  • のようなインライン イベント ハンドラは使用しないでくださいonclick。まったく。これまで。
于 2013-10-14T15:43:27.420 に答える