首页 > 解决方案 > 为什么按钮不切换

问题描述

我正在一个网站上工作,用户可以在该网站上发送好友请求、接受请求和取消请求。我在按钮切换时遇到问题,当用户向我发送朋友请求时,我身边的按钮显示“跟随”,当我点击“跟随”按钮时,按钮应该更改为“跟随”,但确实如此不是。我将附上一张图片,以使我的问题更加具体。注意:两张图片来自不同的模板和视图,第一张图片是问题所在。正如您在我的第一张图片中看到的那样,单击该按钮时仍保留在 FOLLOW BACK 上,单击时该按钮应更改为 FOLLOWING 但不是。我的代码中缺少什么?

在此处输入图像描述

在此处输入图像描述

模型:

class FriendRequest(models.Model):
    to_user = models.ForeignKey(settings.AUTH_USER_MODEL,on_delete=models.CASCADE, related_name='to_user')
    from_user = models.ForeignKey(settings.AUTH_USER_MODEL,on_delete=models.CASCADE, related_name='from_user')
    date = models.DateTimeField(auto_now_add=True, null= True) 

class Meta:
    verbose_name = 'Friend request'
    verbose_name_plural = 'Friend requests'
    ordering = ['-date']

def __str__(self):
    return "from {}, to {}".format(self.from_user.username, self.to_user.username)

视图.py:

@login_required
def following_view(request, username):
    p = FriendRequest.objects.filter(from_user__username=username).exclude(
    Q(from_user__profile__friends__blocked_by__user__username=username)|
    Q(from_user__profile__blocked_users__user=request.user)|
    Q(to_user__profile__blocked_users__user=request.user))

    all_profile_users = []
    button_status_list = []

    for user_obj in p:
        u = user_obj.to_user
        all_profile_users.append(u)
        friends = Profile.objects.filter(user=request.user, friends__id=user_obj.id).exists()
        button_status = 'none'
        if not friends:
            button_status = 'not_friend'

            if len(FriendRequest.objects.filter(
                from_user=request.user).filter(to_user=u)) == 1:
                button_status = 'cancel_request_sent'

            if len(FriendRequest.objects.filter(
                from_user=u).filter(to_user=request.user)) == 1:
                button_status = 'follow_back_request'

        button_status_list.append(button_status)

    context = {
        'owner_of_the_following': request.user.username == username,
        'profile_and_button_status': zip(p,button_status_list),
        'u': all_profile_users,
        'following': p,
    }

    return render(request, 'following.html', context)

模板:

<div class="card news-card mb-2" id="suggested-people-card" style="width:700px;padding:13px;box-shadow:none;"> 
{% for data in profile_and_button_status %}
<!-- Copy and paste for another post below -->
  <div class="row mb-3">

   {% if data.0.to_user.profile.profile_pic %}
   <a href="{% url 'site:profile-view' data.0.to_user.username %}">
    <img src="{{ data.0.to_user.profile.profile_pic.url }}" class="rounded-circle avatar-img ml-4" height="50" width="50" style="border:none;padding:0px;position:relative;top:-1px;object-fit: cover;">
    </a>
    {% endif %}

   <div class="suggestionfrndnamemutual-cont mt-1 ml-3"> 
    <p class="dark-grey-text text-lowercase font-weight-bold">
      <a href="{% url 'site:profile-view' data.0.to_user.username %}"><span class="suggestionfrnd-username username dark-grey-text text-truncate" style="">
      {{ data.0.to_user.username }}</span></a>
    </p>     
    <p class="card-text" style="position:relative;top:0px;">
      <span class="suggestionfrnd-mutual text-muted" style="font-size:13px;">New to Pixmate</span>
    </p>
  </div>

  {% if not data.0.to_user == request.user %}
   <div class="mt-2" style="position:absolute;right:30px;">
    {% if data.1 == 'not_friend' %}
     <a href="{% url 'site:send_friend_request' data.0.to_user.id %}" class="friend-request">
       <button type="button" class="btn btn-primary btn-sm btn-block waves-effect text-capitalize font-weight-bold p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
        <span style="padding-right:10px;" class="ml-2">Follow</span>
      </button>
    </a>
    {% elif data.1 == 'cancel_request_sent' %}
    <a href="{% url 'site:cancel_friend_request' data.0.to_user.id %}" class="friend-request">
       <button type="button" class="btn btn-amber btn-sm btn-block waves-effect text-capitalize font-weight-bold p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
        <span style="padding-right:10px;" class="ml-2">Cancel</span>
      </button>
    </a>
    {% elif data.1 == 'follow_back_request' %}
    <a href="{% url 'site:accept_friend_request' data.0.to_user.id %}" class="friend-request">
       <button type="button" class="btn btn-primary btn-sm btn-block waves-effect text-capitalize font-weight-bold p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
        <span style="padding-right:10px;" class="ml-2">Follow Back</span>
      </button>
    </a>

    {% else %} <!-- THIS BUTTON IS NOT SHOWING -->
    <a href="{% url 'site:remove_friend' data.0.to_user.id %}" class="friend-request">
       <button type="button" class="btn btn-sm btn-block border waves-effect text-capitalize font-weight-bold dark-grey-text p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
        <span style="padding-right:10px;" class="ml-2">Following</span>
      </button>
    </a>

    {% endif %}
  </div>
  {% endif %}
  </div> 
<!-- Row Grid -->
{% endfor %} 
</div>

标签: pythondjango

解决方案


没有提到点击“follow back”会发生什么使用javascript onclick()函数来定义点击“follow back”按钮时它应该变为“following back”。


推荐阅读