Question

我正在尝试使用ajax制作评论系统。

HTML片段：

<div class="ThreadComments">
    <div class="ActualComments">
        <div class="row collapse">
            <div class="large-1 columns small-3" align="center">
                <img src="http://placehold.it/35x35&text=[img]" />
            </div>
            <div class="large-11 columns">
                <p class="speechBubbleSecondary"><strong class="commenter_name">George</strong>Comment text <span class="MRWlabel" MRW-data="">Img</span>
                </p>
            </div>
        </div>
    </div>
    <div class="row collapse">
        <div class="large-1 columns small-3" align="center">
            <img src="http://placehold.it/35x35&text=[img]" />
        </div>
        <div class="large-11 columns">
            <textarea class="WP_commentator" style="resize: none; height: 35px; font-size: 12px; padding: 2px;" pi-data="<?= $post['post_id'] ?>"></textarea>
        </div>
    </div>
</div>

我正在使用Foundation 5因此标记很重，我希望当用户发布评论以将其附加到ActualComments div时，问题是我无法选择它，因为有更多帖子具有相同的标记。

这是我的ajax功能：

$('textarea.WP_commentator').focus(function () {

    $('textarea.WP_commentator').keydown(function (keycheckcode) {
        if (keycheckcode.keyCode == 13) {
            var commentText = $(this).val();
            var postId = $(this).attr('pi-data');
            $.ajax({
                type: "post",
                url: "commentator",
                data: {
                    comment: commentText,
                    post_id: postId
                },
                success: function (html) {
                    $('textarea.WP_commentator').val("");
                    append(html);

                }
            });
        }
    });
});

Answer 1

您可以缓存变量，然后使用一些DOM navigation method。

    var $this = $(this);
    var commentText = $this.val();
    var postId = $this.attr('pi-data');
    $.ajax({
        type: "post",
        url: "commentator",
        data: {comment: commentText, post_id: postId},
        success: function(html) {
            $this.val("")
            .closest('.ThreadComments').find('.ActualComments').append(html);

         }
     });

Answer 2

首先，我认为你的焦点功能是多余的。您需要确定要输入的元素文本，并将其用于相对DOM遍历。像这样：

$('textarea.WP_commentator').keydown(function (keycheckcode) {

    var myElem = $(this);

    if (keycheckcode.keyCode == 13) {
        ...

        $.ajax({
            ...
            success: function (html) {
                myElem.closest('.ActualCommentsSibling')
                    .siblings('.ActualComments').append(html);
            }
        });
    }
});

我在其中添加了一个兄弟元素，因为.ActualComments不是myElem的祖先元素。您需要在HTML中为该元素添加适当的类。

Answer 3

类似

$( ".ActualComments" ).last().append()

Jquery难以选择正确的div来附加html

3 个答案: