0

过去几天我一直在研究评论系统，但遇到了几个问题：

  1. 消息评论未附加到正确的 div - 我如何将评论附加到正确的 div，然后创建一个新的 div 以允许进行另一条评论

  2. 每当用户点击页面下方的元素的“评论”链接时，他们就会被移动到页面顶部，这会导致混乱

我该如何解决这些问题？

我在这里发布了我的系统演示，因为有相当多的代码要经过：http: //jsfiddle.net/BQ84D/3/

这是相关的JS代码：

$(document).ready(function () {
    $('.comment_button').click(function () {
        var ID = $(this).attr("id");
        var comment = $("#ctextarea" + ID).val();
        var dataString = 'comment=' + comment + '&msg_id=' + ID;
        if (comment.match(/^\s*$/)) {
            $(function () {
                $("#dialog-message2").dialog({
                    modal: true,
                    buttons: {
                        Ok: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            });
        } else {
            var stuff = '<div class="stcommentbody" id="stcommentbody"><div class="stcommentimg"><img src="sri.jpg" class="small_face"/></div> <div class="stcommenttext">' + comment + '<div class="stcommenttime"></div> </div></div>';
            $("#commentload" + ID).append(stuff);
            $("#ctextarea" + ID).val('');
            $("#ctextarea" + ID).focus();
        }
        return false;
    });
});
4

2 回答 2

2

这是一个演示。 http://jsfiddle.net/gxELB/

我添加了以下代码以在评论框之前插入评论

$('<div class="commentcontainer" id="commentload5"><div class="stcommentbody" id="stcommentbody5"><div class="stcommentimg"><img src="" class="small_face"></div><div class="stcommenttext">    <b>Test</b>&nbsp;' + comment + '<div class="stcommenttime">8 days ago</div></div></div></div>').insertBefore('#commentbox' + ID);

我还添加了以下代码来防止表单提交，以便演示工作。

$('form').submit(function (e) {
    e.preventDefault();
});

为了解决问题 #2，我删除了 href="#" 属性。你也可以做一个 e.preventDefaut() 来解决这个问题。

于 2013-02-08T08:17:36.117 回答
1

试试这个小提琴

Point 1.

我认为您只有一个 divcommentload在小提琴中。

Point 2.

$("[id^='commentlink']").click(function (e) {
    e.preventDefault(); // <--prevent the default behavior clicked link
});

如果您.preventDefault()在所有单击的链接中或使用上述链接，则每当单击 id 开头的链接时页面都不会跳转到顶部commentlink

于 2013-02-08T08:14:44.153 回答