Jquery Изменить значение абзаца

Question

У меня возникают проблемы при обновлении значения paragraph, которое приходит от ajax request

<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) с переменной, чтобы она оставалась доступной после завершения вызова 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']);
        }
    })
});