0

我想用我一直在研究的这段代码实现两件事，所以不确定是否要分开问题：

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 插件将是一个很好的解决方案。

onMoreClick()单击More...html 项 时调用该函数

  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 回答