Jquery 改变段落的值

Question

我在更新来自 ajax 请求 的 paragraph 值时遇到问题

<div class="comment__text" id="data">
                                    <p>{{ node.text }}</p>
                                    {% if user.is_authenticated %}
                                        <div class="thumb-likes">
                                            <p class="likes">{{ node.likes }}</p>
                                            <i class="fa fa-thumbs-up hvr-buzz like" data-id="{{ node.id }}"></i>
                                            <i class="fa fa-thumbs-down hvr-buzz dislike" data-value="{{ node.id }}"></i>
                                        </div>
                                        {% else %}
                                            {{ node.likes }}
                                    {% endif %}
                                </div> 

我尝试过以下方法

$(document).on('click', '.like', function () {
        $.ajax({
            type: 'POST',
            url: '',
            data: {
                'like-id': $(this).data('id')
            },
            success: function(response) {
                $(this).closest('.thumb-likes')
                    .find('.likes')
                    .html(response['total_likes']);

            }
        })
    });
    $(document).on('click', '.dislike', function () {
        $.ajax({
            type: 'POST',
            url: '',
            data: {
                'dislike-id': $(this).data('value')
            },
            success: function(response) {
                 $(this).closest('.thumb-likes')
                    .find('.likes')
                    .html(response['total_likes']);
            }
        })
    });

该值未更新。当我尝试 $('.likes') 时，它可以工作，但所有值都会同时更新。如果我对如何遍历元素的理解不正确，请解释我到底缺少什么。

Answer 1

我想你需要将 $(this) 绑定(bind)到一个变量，以便它在 ajax 调用完成后仍然可用:

$(document).on('click', '.like', function () {
    $this = $(this)
    $.ajax({
        type: 'POST',
        url: '',
        data: {
            'like-id': $(this).data('id')
        },
        success: function(response) {
            // NOTE THIS CHANGE HERE
            $this.closest('.thumb-likes')
                .find('.likes')
                .html(response['total_likes']);
        }
    })
});