页面重新加载后如何隐藏和显示按钮 [英] How to hide and show button after page reload

问题描述

我正在学习jQuery，但在重新加载页面时如何隐藏和显示按钮方面存在问题.我在下面尝试了我的代码，它会隐藏并显示单击时的按钮，但是在页面加载时，按钮会变回原来的状态.这是我尝试过的:

I am learning jQuery and I have issues on how to hide and show a button during page reload. I tried my code below, it hides and shows the button on click, but when the page loads, the button changes back to former state. This is what I've tried:

模板:

<span class="load-requests-sections"> <!-- Load page if request sent in Ajax -->
<!-- Main -->
<main>

<!-- Container -->
<div class="container-fluid" id="suggested-people-cont" style="position:relative;top:170px;padding-bottom:100px;">

<!-- Row Grid Container -->
<div class="row d-flex justify-content-center">
<div class="col-lg-6 col-md-9 col-12"> 
{% if following %}
<h6 class="suggested-people-header mb-3" style="font-weight:500;">Following {{ following.count|human_format }}</h6>
{% endif %}

<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' %}
    <!-- CLICK ON THIS BUTTON TO HIDE AND SHOW THE BELOW BUTTON -->
    <a href="{% url 'site:accept_friend_request' data.0.to_user.id %}" class="friend-request followback-btn">
       <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>

    <!-- SHOW THIS BUTTON AFTER PAGE RELOAD -->
    <a href="{% url 'site:remove_friend' data.0.to_user.id %}" class="friend-request following-btn" style="display:none;">
       <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 -->
{% empty %}
  {% if owner_of_the_following %}
  <div class="container text-center image-post mt-0">
  <!-- <img src="{{ '/static/' }}images/photo-camera-img.png" class="mb-3" width="60" height="60"> -->
  <p class="dark-grey-text" style="font-size: 28px;">People you're Following</p>
  <p class="dark-grey-text">When you follow someone, it will show here.</p>
  <a href="{% url 'site:people-suggested' %}" class="btn btn-primary btn-md waves-effect mx-auto my-4" style="box-shadow:none;border-radius:30px;">
  <strong>Find People to Follow</strong></a>
  </div>
  {% else %}
  <div class="container text-center image-post mt-0">
  <p class="dark-grey-text"><strong>No users</strong></p>
  </div>
  {% endif %}


{% endfor %} 

</div>    
<!-- Card -->
</div>
<!-- Coloumn Grid -->

</div>
<!-- Row Grid Container -->
</div>
<!-- Container -->

</main>
<!-- Main -->
</span>

jQuery:

//SEND FRIEND REQUESTS WITHOUT PAGE RELOAD THIS WORKED
$('.load-requests-sections').on('click', '.friend-request', function(event){
  event.preventDefault();
  var page = $(this).attr('href');
  $('.load-requests-sections').load(page);
});

//HIDE AND SHOW BUTTON AFTER PAGE RELOAD RETURN BACK TO OLD STATE WHEN PAGE RELOAD
$('.followback-btn').on('click', function(event){
  event.preventDefault();
  $('.followback-btn').hide();
  $('.following-btn').show();
})

我还尝试使用localstorage，以在页面重新加载后显示隐藏的按钮，但是仍然显示单击的旧按钮.重新加载页面后如何隐藏旧按钮.

I also tried using localstorage, to show the hidden button after the page reloads, but the old button clicked is still shown. How do I hide the old button after a page reload.

$(document).ready(function(){

   var $hidden = $('.following-btn');

   if (localStorage.getItem('show')) {
      $hidden.show();
      $('.followback-btn').hide();
   }

   $('.followback-btn').on('click', function() {
      localStorage.setItem('show', true);
      window.location.reload(false); 
   });
})

推荐答案

在测试是否按下.followback-btn时似乎存在问题.

There seems to be a problem in how you test if the .followback-btn was pressed.

在您的第二个jQuery示例中，尝试替换此行:

In your second jQuery example, try replacing this line:

localStorage.getItem('show') && $hidden.show();

与此:

if (localStorage.getItem('show')) {
    $hidden.show();
    $('.followback-btn').hide();
}

这意味着，如果在本地存储中设置了show变量，则在页面加载时将显示.following-btn，而不是.followback-btn.

This means that if the show variable is set in the local storage, the .following-btn will be shown when the page loads, instead of the .followback-btn one.

希望这会有所帮助.

这篇关于页面重新加载后如何隐藏和显示按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！