Question

我想通过我一直在努力的本规范实现两件事，所以不确定是否要将问题分开：

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个项目附加到已经显示的列表中。

我已经尝试了一些代码，但希望得到一些指导

Answer 1

我在纯逻辑和逻辑实现的基础上回答你。它可能有API的东西，但我真的不知道。其次;如果您在使用jQuery时没有任何问题，那么找到一些jQuery插件将是一个很好的解决方案。

点击onMoreClick() html项目

后调用函数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

Answer 2

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之类的内联事件处理程序。完全没有。如初。

限制函数中动态列表项的数量

2 个答案: