为什么按钮不切换 [英] Why is button not toggling

问题描述

我正在一个网站上，用户可以发送朋友请求，接受请求和取消请求.我在按钮切换上遇到问题，当用户向我发送一个朋友请求我旁边的botton显示跟随"时，当我单击跟随"按钮时，该按钮应该更改为跟随"，但确实如此不是.我将附上一张图片，以使我的问题更加具体.注意:这两个图像都来自不同的模板和视图，第一个图像是问题所在.如您在我的第一张图片中所见，单击该按钮后，该按钮仍保留在跟随后退"上，当单击该按钮时，该按钮应更改为跟随中"，但不会更改为跟随中".我的代码中缺少什么?

i am working on a website where users can send friend request, accept request and cancel request. I have a problem on button toggling, when a user send me a friend request the botton on my side displays 'follow back', when i click on the 'follow back' button the button supposed to change to 'following', but it does not. I will attached an image to make my question a bit more specific. Note: Both images are from different template and views, the first image is where the problem is at. As you can see in my first image, the button still remain on FOLLOW BACK when it is clicked, when clicked the button should change to FOLLOWING but it not. What am i missing in my code?

型号:

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)

Views.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>

推荐答案

没有提及单击跟进"时应该发生的情况使用javascript onclick()函数定义单击向后跟随"按钮时应将其更改为向后跟随".

There is no mentioning of what should happen on clicking "follow back" Use javascript onclick() function to define that on clicking of "follow back" button it should change to "following back".

这篇关于为什么按钮不切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！