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.

commentloadフィドルにdiv が 1 つだけあると思います。

Point 2.

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

クリックしたすべてのリンクで、または上記のリンクを使用した場合.preventDefault()、ID で始まるリンクがクリックされるたびにページが一番上にジャンプしません。commentlink

于 2013-02-08T08:14:44.153 に答える