Question

我有一个页面，我循环了几个帖子，每个帖子都包含属于该帖子的评论列表。在每个帖子上我也有表格，您可以在该帖子上发表评论。

我正在尝试将评论添加到属于评论留下的帖子的评论列表中。现在，它总是将评论添加到我页面上第一篇帖子的评论列表中。

jQuery的：

$('.btn-comment').on("click", function (e) {
    var text = $('.comment-text').val();
    var post_id = $(this).attr('data-id');

    $.ajax({
        method: "POST",
        url: "./ajax/ajax_comment.php",
        data: { text: text, post_id: post_id }
    })
    .done(function( res ) {
        if (res.status == "success") {
            var comment = `<li class="comment-li" style="display: none;"> TEXT </li>`;

            $(".comment-ul").prepend(comment);
            $(".comment-li").first().slideDown();
        }
});

HTML：

<ul class="posts">

    <li class="post" data-id="1">
        <h1>POST 1</h1>
        <form action="" class="comment-form" method="post">
            <input type="text" name="comment" id="comment1" class="comment-text">
            <input type="hidden" name="post_id" value="1" class="post_id">
            <input type="submit" data-id="1" class="btn-comment">
        </form>

        <ul class="comment-ul" data-id="1">
            <li class="comment-li">Comment 1</li>
            <li class="comment-li">Comment 2</li>
            <li class="comment-li">Comment 3</li>
        </ul>
    </li>

    <li class="post" data-id="2">
        <h1>POST 2</h1>
        <form action="" class="comment-form" method="post">
            <input type="text" name="comment" id="comment2" class="comment-text">
            <input type="hidden" name="post_id" value="2" class="post_id">
            <input type="submit" data-id="2" class="btn-comment">
        </form>

        <ul class="comment-ul" data-id="2">
            <li class="comment-li">Comment 1</li>
            <li class="comment-li">Comment 2</li>
            <li class="comment-li">Comment 3</li>
        </ul>
    </li>

</ul>

所有评论处理都是用Ajax完成的，一切正常，但只是前端放置的评论不起作用。

Answer 1

这种情况正在发生，因为您没有保留点击按钮和与其相关的评论列表之间的任何关系 - 相反，您定位所有评论列表，因为您的选择器是.comment-ul，没有进一步的特异性。

$('.btn-comment').on("click", function (e) {
    var
    text = $(this).siblings('.comment-text').val(),
    post_id = $(this).attr('data-id'),
    ul = $(this).closest('.post').find('.comment-ul'); //<-- grab this post's comments list

    $.ajax({
        method: "POST",
        url: "./ajax/ajax_comment.php",
        data: { text: text, post_id: post_id }
    })
    .done(function( res ) {
        if (res.status == "success") {
            var comment = `<li class="comment-li" style="display: none;"> TEXT </li>`;

            ul.prepend(comment).slideDown(); //<-- target just our UL, not all
        }
});

关键是我们定义ul的地方。我们必须从单击的按钮映射到相应的注释列表。查看HTML的路径是在祖先.post元素之外，然后返回到后代.comment-ul元素。

Answer 2

您的代码中的另一个问题是，您只能获得第一篇帖子的评论：

var text = $('.comment-text').val();

这个问题和你描述的问题都是一样的。像这样的操作将始终返回第一个匹配。即使您在前面添加了新元素（前缀为所有匹配项），也可以显式设置第一个匹配项的动画：

$(".comment-li").first().slideDown();

您在点击处理程序中要做的第一件事是确定所点击内容的本地上下文。它可以很简单：

$('.btn-comment').on("click", function (e) {
    var id = $(this).data('id');
    //...
});

使用id，你可以专门定位你想要的元素。例如：

var text = $('li[data-id="' + id + '"]').find('.comment-text').val();

和

$('li[data-id="' + id + '"]').find(".comment-ul").prepend(comment);
$('li[data-id="' + id + '"]').find(".comment-li").first().slideDown();

相反，如果不使用id（或将来可能没有标记的读者），您可以捕获单击的元素并从该元素的上下文遍历DOM。像这样：

var element = $(this);
var text = element.closest('li.post').find('.comment-text').val();

并在回调中：

element.closest('li.post').find(".comment-ul").prepend(comment);
element.closest('li.post').find(".comment-li").first().slideDown();

将评论添加到它所属的评论列表中

2 个答案: