Question

我正在为网络应用创建评论系统，当用户点击评论图片时会加载评论，使用json动态生成html代码以显示评论。但是，再次单击图像时，会再次请求使用相同的数据填充页面

继承我的代码

function latest_pheeds() {
    var action = url+"pheeds/latest_pheeds";
    $.getJSON(action,function(data) {
        $.each(data,function(index,item) {
            $('#pheed-stream').append
            (
            '<div class="pheed" id="'+item.pheed_id+'">'+
            '<p><a href="">'+item.user_id+'</a></p>'+
            '<p>'+item.pheed+'</p>'+
            '<div class="pheed_meta">'+
            '<span>'+item.datetime+' Ago</span>'+
            '<span>'+item.comments+
            '<img class="comment_trigger" src="/pheedbak/assets/img/comment.png" title="Click to comment on pheed" onclick="retrieve_comments('+item.pheed_id+')">'+
            '</span>'+
            '</div>'+
            '</div>'
            );
        });
    });
}



function retrieve_comments(pheed_id) {
    var action = url+'comments/get_comments';
    var crsf =  $('input[name=ci_csrf_token]').val();
    var dataString = "pheed_id="+pheed_id+"&ci_csrf_token="+crsf;
    $.ajax({
        url:action,
        type:'POST',
        cache:false,
        dataType:'json',
        data:dataString,
        success:function(data) {
            $.each(data,function(index,item) {
                $("#" + pheed_id).append(
                '<div class="pheed_comments">'+
                    '<div class="comment">'
                    +'<span><p>'+item.user+'</p></span>'
                     +item.comment+
                    '</div>'+
                '</div>'+
                '<div id="comment_box">'+
                    '<textarea id="comment" cols="30">'+
                    '</textarea><br>'+
                    '<input type="button" class="submit_btn" value="comment" />'+
                '</div>'
                );
            });
        }
    });
}

latest_pheeds（）加载pheeds，retrieve_comments获取传递给它的pheed_id的注释。如何确定评论区域是否已填充，如果可用，则使用新评论更新评论区域。感谢

Answer 1

检查

$("#" + pheed_id +' .pheed_comments').length

如果元素（我猜你的意思是div.pheed_comments）不存在，则为0。

Answer 2

有几种选择：

1）如果您已经拥有了ajax调用中的所有注释，那么只需从DOM中删除之前的注释并插入您刚刚获得的所有注释。

2）如果你有一个只能检索新注释的ajax调用，那么你可以检查DOM以查看你是否已经在DOM中有注释然后只是在一些令牌之后请求新的注释（你本来可以保存）。当您收到新评论时，您可以将它们附加到您拥有的内容中。

$('#pheed-stream').children().length会告诉你pheed-stream层次结构中有多少个孩子。如果那是零，你还没有做过任何一次。

我建议最简单的方法是只检索所有注释并用新的注释列表替换所有注释，而不是尝试只检索新注释。仅检索新注释将需要某种时间令牌，您可以向服务器提供，以便它知道要为您提供哪些“新注释”。

$("#" + pheed_id + " .pheed_comments").length会告诉您是否已为该pheed_id检索了任何评论。

Answer 3

你正在添加带有id的div。只需检查它是否存在。如果是，则更新它，否则插入。

确定元素是否存在

3 个答案: