2017-03-09 235 views
-1

我試圖隱藏或刪除用戶點擊下拉菜單時的一些html元素。javascript jquery在頁面刷新後仍然隱藏/刪除

我已經嘗試過:

$("#notif").click(function(){ 
$("#count").remove(); 
}); 

但問題是,當用戶刷新頁面,則#COUNT元素是再次顯示。 如何在用戶登錄時隱藏#count,即使頁面被刷新並在用戶重新登錄時再次顯示 我對JavaScript不太瞭解。

我可以在JavaScript/jQuery中做到這一點?或者我應該保持在PHP會話或什麼的價值?

+2

[使用本地存儲(http://stackoverflow.com/a/12063002/4248328) –

+0

使用'localStorage' – Bharat

+1

如上述評論,你可以使用localStorage的或餅乾爲了這個目的。 – user7417866

回答

0

我使用jQuery插件(jQuery的餅乾)這一點,你可以從 https://github.com/js-cookie/js-cookie

首先得到相同的所有設置的Cookie當用戶點擊

按鈕
$("#notif").click(function() { 
    Cookies.set('RemoveCount', 'true'); 

    $("#count").hide(); 
}); 

然後在你的頁面加載,你可以檢查此爲你的目的

$(function() { 
    if (Cookies.get('RemoveCount') == 'true' && Cookies.get('RemoveCount') != 'undefined') { 
     $("#count").hide(); 
    } else { 
     $("#count").show(); 
    } 
} 

<html> 
<head> 
<script 
    src="https://code.jquery.com/jquery-3.1.1.min.js" 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
    crossorigin="anonymous"></script> 
<script src="../js.cookie.js"></script> 
</head> 
<body> 
    <button id='clckced'> removeCount</button> 
    <div id="RemoveCount"> 
    This should be removed. 
    </div> 
    <script> 
     $(function(){ 
      if (Cookies.get('RemoveCount') == 'true' && Cookies.get('RemoveCount') != 'undefined'){ 
       $("#RemoveCount").hide(); 
       } else { 
        $("#RemoveCount").show(); 
       } 
      $('#clckced').click(function(){ 
       Cookies.set('RemoveCount', 'true'); 
       $("#RemoveCount").hide(); 
      }) 
     }); 
    </script> 

</body> 
</html> 

只是刪除Cookies當用戶註銷...

Cookies.remove('RemoveCount'); 
+0

我不能整合這與laravel – Raphael

+0

它沒關係,它現在工作。謝謝 – Raphael

+0

應該沒有任何問題,因爲你只需要玩JS和jQuery。 – user7417866

0

它很簡單。

$(document).ready(function(){ 
    var x=$("#notif option:selected").val(); 
    if(x=="" || x==0){$("#count").remove();} 
}); 

將以上代碼放在JavaScript文件或腳本標記中。

+0

你將如何維持這個頁面刷新? – user7417866

0
<?php 
if(!isset($_SESSION["session_name"])) 
{ 
$_SESSION["session_name"]=''; 
} 
?> 
<script> 
var session=<?php echo $_SESSION["session_name"]; ?>; 
if(session!='') 
{ 
$("#count").hide(); 
} 
</script> 
0
//one option 
$(document).ready(function(){ 
    $("#count").hide(); 
}); 
//second option 
$(document).ready(function(){ 
    $("#count").remove(); 
}); 
//third option 
$(document).ready(function(){ 
    $("#count").css("display","none"); 
}); 
+0

無論您是否點擊隱藏按鈕,這總是會隱藏計數 – user7417866

+0

您可以將用戶操作存儲在數據庫中,並且在裝入或刷新時給出css,因爲您將分數保存在 –

+0

中,但是在哪裏檢查到您的解決方案? – user7417866

0

同樣地,我試圖像這樣

$("#notif").click(function(){ 
$("#count").remove(); 
}); 

我一直在使用會話存儲,它存儲在客戶端幻燈片

c赫克此鏈接:

http://jsfiddle.net/h4JXs/5300/

-1

您還可以使用的sessionStorage(或localStorage的)記住點擊。

每次頁面加載時,首先檢查存儲以檢查用戶是否單擊。如果是這樣,#count被刪除。

當用戶點擊#notif時,刪除#count元素,並將信息保存到存儲中,以便下次加載頁面時可以再次刪除該頁面。

sessionStorage將在瀏覽器窗口或選項卡打開時在本地保存信息。 localStorage將永久保存,直到明確刪除。

在這個問題上,你有本地存儲,sessionStorage的,餅乾和會話之間的差異一個很好的討論:What is the difference between localStorage, sessionStorage, session and cookies?

在你的情況,我認爲最合適的解決方案是sessionStorage的(或localStorage的取決於如何持久你想該信息),因爲不需要將該信息發送到服務器。

<html> 
    <head> 
    <script 
     src="https://code.jquery.com/jquery-3.1.1.min.js" 
     integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
     crossorigin="anonymous"></script> 
    </head> 
    <body> 
    <button id='notif'> removeCount</button> 
    <div id="count"> 
     This should be removed. 
    </div> 
    <script> 
     window.onload = function() { 
     if (window.sessionStorage && window.sessionStorage.getItem('removeCount') == 'true') { 
      $("#count").remove(); 
     } 

     $('#notif').click(function() { 
      if (window.sessionStorage) { 
      window.sessionStorage.setItem('removeCount', 'true'); 
      $("#count").remove(); 
      } 
     }); 
     } 
    </script> 

    </body> 
</html> 
+0

你真的愚蠢或試圖成爲..只存儲到本地機器,除非它明確集成服務器使用..只是通過閱讀答案的問題並不意味着對所有情況都是如此...... – user7417866

+0

cookie本地存儲(在客戶端)。但是,每次請求都會在服務器和客戶端之間傳輸它們(請參閱[https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie](https://developer.mozilla) .org/en-US/docs/Web/API/Document/cookie)),這就是我想再次說的 – airos

+0

,如果服務器要求,如果不是,他們不會 – user7417866