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，评论 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 没有做任何事情，但我正试图让这项工作来分隔评论。

4

3 回答 3

3

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

所以可能在做 $('.answer').append() 你应该做 $(this).after()。这里this将指向被点击的元素

于 2013-06-15T23:12:22.930 回答
0

很难理解你在问什么，但你应该有这样的代码来创建你的 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;
});
于 2013-07-12T06:46:38.700 回答
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()时sub-reply1，实际上是从 DOM 中删除它们。如果您想在之后将它们放置在其他地方，则需要重新创建它们。您可能已经意识到这一点，但我只是指出这一点。

于 2013-06-15T23:47:24.507 回答