Jquery 将注释前置到它所属的注释列表

我有一个页面，我循环出几个帖子，每个帖子都包含一个属于该帖子的评论列表。在每个帖子上我都有一个表格，你可以在上面留言

我试图在评论列表中预先添加一条评论，该评论属于该评论留下的帖子。现在，它总是在我的页面上第一篇文章的评论列表前添加评论

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();
        }
});

$（'.btn comment'）。在（“单击”，函数（e）{
var text=$（'.comment text'）.val（）；
var post_id=$（this.attr（'data-id'）；
$.ajax({
方法：“张贴”，
url:“./ajax/ajax\u comment.php”，
数据：{text:text，post\u id:post\u id}
})
.完成（功能（res）{
if（res.status==“success”）{
var comment=`
TEXT
`；
$（“.comment ul”）.prepend（comment）；
$（“.comment li”）.first（）.slideDown（）；
}
});

html:

职位1

评论1
评论2
评论3



职位2

评论1
评论2
评论3

---

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

之所以发生这种情况，是因为您没有保留单击的按钮和与之相关的评论列表之间的任何关系，而是针对所有的评论列表，因为您的选择器是

 .注释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
        }
});

$（'.btn comment'）。在（“单击”，函数（e）{
变量
text=$（this）.sides（'.comment text'）.val（），
post_id=$（this）.attr（'data-id'），
ul=$（this）.closest（'.post'）.find（'.comment ul'）；//代码中的另一个问题是，您只能得到第一篇文章的注释：

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();

以及：


相反，无需使用
id
（或者对于将来的读者，他们的标记中可能没有该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();

您可以显示处理表单post的代码吗？大概您可以使用
post\u id
值（从隐藏元素或提交按钮）以您想要的特定
ul
为目标，给定其
数据id
属性。@David我已经添加了上面的代码。现在它确实在正确的位置向下滑动注释！唯一的问题是注释文本仍然不是所选输入的注释。它从第一篇文章中获取注释文本。我没有发现这个问题。现在已更新。基本规则是：在事件回调中始终保持内容上下文（与事件触发器相关）。事件回调中的通用选择器将失去触发事件的元素的特定性。谢谢@Utkanos！：）不客气。如果某个答案对您有帮助，请对其进行更新投票，并将答案标记为已接受：）
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();