Question

我正在创建一系列评论，并回复下面的评论。我使用此代码在评论下面添加新回复。

$(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，评论1将在评论2下面生成。回复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的其他方面不会影响它，只有这一个函数会创建子注释。到目前为止，独特的主题ID并没有做任何事情，但我试图让这项工作分开评论。

Answer 1

使用jquery .after()。使用此方法，您可以在为.after（）函数提供的元素之后添加一个新元素。

所以可能正在做$（'。answer'）。append（）你应该做$（this）.after（）。此处this将指向已点击的元素

Answer 2

您可以尝试以下内容：

$(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()字段上调用sub-reply1时，实际上是从DOM中删除它们。如果你想在之后的其他地方放置它们，你需要重新创建它们。你可能已经意识到了这一点，但我只是指出了它。

Answer 3

很难理解你在问什么，但你应该有这样的代码来创建你的sub-reply1-send：

$(document).on('click','.reply',function(){
   $('.sub-reply1').remove(); // Remove any previous reply boxes first
   $(this).parent().after('<div class="sub-reply1" style=""><textarea class="sub-reply1-textarea" name="comment-reply" style=""></textarea><div class="sub-reply1-send" style=""></div></div>');
}

然后将评论置于相同的问题答案下：

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

或者因为页面上只应该有1个子回复1，所以只需将其放在那之后。

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

jQuery追加订单？

3 个答案: