1

私は一連のコメントを作成しており、その下にコメントへの返信があります。このコードを使用して、コメントの下に新しい返信を追加します。

$(document).on('click', '.sub-reply1-send', function() {
    var reply = $('textarea[name=comment-reply]').val();
    $('.sub-reply1, .sub-reply1-textarea, .sub-reply1-send').slideUp(250).remove();
    $('.answer').append("<div class='comment-sub-reply' style='display:none'>" + reply + "</div>");
    $('.comment-sub-reply').slideDown(250);
    subreply_visible = false;
});

これは、返信するコメントが 1 つしかない場合は問題なく機能しますが、コメントが 2 つある場合 (たとえば、Comment1 と Comment2)、Comment1 は Comment2 の下に生成されます。Comment1 への返信は正常に機能しますが、Comment2 への返信は、Comment1 の最後の返信ボックスの下に返信ボックスを生成します。

クリックしたコメントに追加する方法はありますか?

編集: 私が持っているものから生成された HTML マークアップ。

<div id="right-bar" class="flexcroll" style="display: block;">
    <div class="question" style="display: block;">
        <div class="question-content">What is the significance of this section?</div>
    </div>
    <div class="answer" style="display: block;">
        <div class="question-answer" style="" id="thread1">This is not a test
            <img class="reply" src="reply.png" />
        </div>
        <div class="question-answer" style="" id="thread0">Test
            <img class="reply" src="reply.png" />
        </div>
        <div class="comment-sub-reply" style="">Another Test</div>
        <div class="comment-sub-reply" style="">Still underneath Test</div>
        <div class="comment-sub-reply" style="">This isn't a test either, but it's appearing under test</div>
        <div class="sub-reply1" style="">
            <textarea class="sub-reply1-textarea" name="comment-reply" style=""></textarea>
            <div class="sub-reply1-send" style=""></div>
        </div>
    </div>
    <div id="comment">
        <form name="commentForm">
            <textarea type="text" name="comment" id="answer-text-input" align="top" class="flexcroll" style="display: block;"></textarea>
        </form>
        <div id="button" style="display: block;"></div>
    </div>
</div>

JQuery の他の側面は影響しません。この 1 つの関数だけがサブコメントを作成します。これまでのところ、一意のスレッド ID は何もしませんが、コメントを分離するためにそれを機能させようとしています。

4

3 に答える 3

3

jquery .after()を使用します。これを使用すると、.after() 関数に指定した要素の後に新しい要素を追加できます。

したがって、おそらく $('.answer').append() を実行すると、$(this).after() を実行する必要があります。ここでthisは、クリックされた要素を指します

于 2013-06-15T23:12:22.930 に答える
0

次のようなものを試すことができます：

$(document).on('click', '.sub-reply1-send', function() {
    // Get the current answer we're commenting on
    // closest() walks up the DOM and gets us the first parent matching the selector
    var $answer= $( this ).closest('.question-answer'),
        reply = $('textarea[name=comment-reply]', $answer).val();
    $('.sub-reply1, .sub-reply1-textarea, .sub-reply1-send', $answer).slideUp(250).remove();
    $("<div class='comment-sub-reply' style='display:none'>" + reply + "</div>").appendTo( $answer ).slideDown(250);
    subreply_visible = false;
});

フィールドを呼び出しremove()ているときは、実際にはそれらを DOM から削除していることに注意してください。sub-reply1後で別の場所に配置する場合は、再作成する必要があります。すでにお気づきかもしれませんが、指摘させていただきます。

于 2013-06-15T23:47:24.507 に答える