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类，而不是您可以保留值，即: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>