未触发关注者的 Jquery

Question

我想向站点添加以下功能，但需要 Jquery 将以下内容更改为取消关注，反之亦然。一切似乎都很好，但它不起作用。 (jquery的所有链接都可以完美运行并加载)
Jquery 的功能

$('a.follow').click(function(e){
    e.preventDefault();

    $.post('{% url "user_follow" %}',
        {
            id: $(this).data('id'),
            action: $(this).data('action')
        },

        function(data){
        if(data['status'] == 'ok' ){var previous_action == $('a.follow').data('action');
            console.log(previous_action);
        // toggle data_action
        $('a.follow').data('action', previous_action == 'follow' ? 'unfollow' : 'follow');

        // toggle link text 
        $('a.follow').text(previous_action =='follow' ? 'Unfollow' : 'Follow');

        // update followers 
        var previous_followers = parseInt($('span.count .total').text());
        $('span.count .total').text(previous_action == 'follow' ? previous_followers + 1 : previous_followers - 1);

        }
    }
    )

    

});

HTML

{% with total_followers=user.followers.count %}
        <span class="count">
            <span class="total">{{ total_followers }}</span>
            follower{{ total_followers|pluralize }}
        </span>
        <a href="" data-id="{{ user.id }}" data-action="{% if request.user in user.followers.all %}un{% endif %}follow" class="follow btn">
            {% if request.user not in user.followers.all %}
            Follow
            {% else %}
            Unfollow
            {% endif %}
        </a>
{% endwith %}

查看 jquery 请求

@login_required
def user_follow(request):
    user_id = request.POST.get('id')
    action = request.POST.get('action')

    if user_id and action:
        try:
            user = User.objects.get(id=user_id)
            if action == 'follow':
                Contact.objects.get_or_create(
                    user_from=request.user,
                    user_to=user
                )
            
            else:
                Contact.objects.filter(user_from=request.user, user_to=user).delete()
            
            return JsonResponse({'status': 'ok'})
        
        except User.DoesNotExist:
            return JsonResponse({'status': 'error'})

    return JsonResponse({'status': 'error'})

最后备注
关注者的 jquery 对象上方有一个 jquery 按钮，不知道它的存在是否有任何影响

Answer 1

您的目标是所有 .follow类相反，您可以保留值(value)，即:this在一些变量中，然后在你的回调中使用它。然后，您需要使用 .text().trim() 比较值这会给你 Unfollow或 Follow根据此更改，您的 .follow class text.LaSTLy，为您的 total 设置正确的计数您可以使用的跨度 prev('span').find('.total')然后更改总值。
演示代码 :

$('a.follow').click(function(e) {
  e.preventDefault();
  var selector = $(this) //declare this outside your ajax
  /* $.post('{% url "user_follow" %}', {
       id: $(this).data('id'),
       action: $(this).data('action')
     },

     function(data) {
       if (data['status'] == 'ok') {*/
  //get text of a tag and trim it(to remove any white spaces)
  var previous_action = selector.text().trim()
  console.log(previous_action);
  // toggle
  selector.data('action', previous_action == 'Follow' ? 'Unfollow' : 'Follow');

  selector.text(previous_action == 'Follow' ? 'Unfollow' : 'Follow');
  //get the span(total) using prev(.count)->find('total')
  var previous_followers = parseInt($(selector).prev('span').find('.total').text());
  //change the span total value
  $(selector).prev('span').find('.total').text(previous_action == 'Follow' ? previous_followers + 1 : previous_followers - 1);

  /* }
    }
  )*/



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="count">
            <span class="total">12</span>follower
</span>
<a href="" data-id="{{ user.id }}" data-action="{% if request.user in user.followers.all %}un{% endif %}follow" class="follow btn">   Follow </a>
<br>
<span class="count">
            <span class="total">23</span> follower
</span>
<a href="" data-id="{{ user.id }}" data-action="{% if request.user in user.followers.all %}un{% endif %}follow" class="follow btn">   Unfollow </a><br>
<span class="count">
            <span class="total">17</span> follower
</span>
<a href="" data-id="{{ user.id }}" data-action="{% if request.user in user.followers.all %}un{% endif %}follow" class="follow btn">   Follow </a>