Question

我最近做了类似于Facebook的墙。

我只需要一些建议或更好的方法。

所以当用户提交他的帖子时，我会将结果添加到div中，我这样做了

$('.get_posts').prepend('<div id="'+stream.sid+'"class="row stream-posts"><div class="span1 stream-thumb"><ul class="thumbnails"><li><a href="#" class="thumbnail"><img src="http://placehold.it/60x60" alt=""></a></li></ul></div><div class="span5 stream-content"><a href="#" class="author">'+stream.author+'</a><p>'+stream.text+'</p></div></div>');

我知道它不是最好的，如果有更简洁的方法来预先添加数据，我想问一位经验更丰富的开发人员。

Answer 1

一个选项可以创建一个html文档并使用load()方法：

从服务器加载数据并将返回的HTML放入匹配的元素中。

markup.html：

    <div class="span1 stream-thumb">
      <ul class="thumbnails">
         <li>
           <a href="#" class="thumbnail"><img src="http://placehold.it/60x60" alt=""></a>
         </li>
      </ul>
     </div>
     <div class="span5 stream-content">
        <a href="#" class="author"></a>
        <p></p>
     </div>

$('.get_posts').prepend('<div id="'+stream.sid+'" class="row stream-posts"></div>');
$("#" + stream.sid).load('markup.html', function(){
   $(this).find('a:last').text(stream.author);
   $(this).find('p:last').text(stream.text)
})

Answer 2

更简洁的方法是创建一个生成帖子所需HTML的函数 -

function createPost(postDetails){
  var html = '';
    html += '<div id="'+postDetails.sid+'"class="row stream-posts">';
    html += '  <div class="span1 stream-thumb">';
    html += '   <ul class="thumbnails">';
    html += '    <li>';
    html += '      <a href="#" class="thumbnail">';
    ...
  return html;
}

这样您只需执行 - $('.get_posts').prepend(createPost(postData));并通过postData参数将所有相关数据传递给函数。更清洁，更易于维护。

根据您实施墙更新的方式 - 您也可以在服务器上构建此HTML块并按原样发送。这样你的JavaScript就不必担心构建标记了 - 你可以只预先添加从AJAX调用中获得的数据。

Answer 3

我也建议使用一个函数，我的方法与其他基于函数的方法非常相似，但涉及创建具有各种属性的元素，而不是将HTML视为字符串（两种方式都有效，并且HTML-as-string方法肯定更简洁。

但是，根据我的经验，这种方法可以更轻松地修改输出，而无需记住HTML字符串是否已正确关闭和转义：

function prependNewPost(elem, stream) {
    var outerDiv = $('<div />', {
        'id': stream.sid,
        'class': 'row stream-posts'
    }),
        innerDiv = $('<div />', {
            'class': 'span1 stream-thumb'
        }).appendTo(outerDiv),
        ul = $('<ul />', {
            'class': 'thumnails'
        }).appendTo(innerDiv),
        li = $('<li />').appendTo(ul),
        a = $('<a />', {
            'href': '#'
        }).appendTo(li),
        image = $('<img />', {
            'src': 'http://placehold.it/60x60',
            'alt': ''
        }).appendTo(a),
        secondInnerDiv = $('<div />', {'class' : 'span5 stream-content'}).appendTo(outerDiv);
    var p = $('<p />').text(stream.text).appendTo(secondInnerDiv);
    outerDiv.prependTo(elem);
}

$('#add').click(
    function() {
        var stream = {};
        stream.sid = 'two';
        stream.author = 'Geoff';
        stream.text = 'Some text, a pseudo-Lorem ipsum, if you will...';
        prependNewPost($('#stream'),stream);
        });

JS Fiddle demo

参考文献：

appendTo()。
Creating elements with jQuery。

Answer 4

如何调用ajax函数？然后，您可以保存输入的数据，也可以解析表情符号/链接，并使用解析后的文本返回整个div并将其附加到墙上。

Jquery是一个更清洁的前置方式

4 个答案: