設置 cookie 以在單擊按鈕時隱藏 div

Question

我正在嘗試顯示默認情況下顯示的 div（包含條款和條件），除非將 cookie 設置為隱藏它。

我已將我的代碼添加到JSFiddle

任何想法為什么我的代碼不起作用？

JavaScript

    function TermsAndConditions(){
   days=30;
   myDate = new Date();
   myDate.setTime(myDate.getTime()+(days*24*60*60*1000));
   document.cookie = 'TermsAndConditions=Accepted; expires=' + myDate.toGMTString();
}
if ($.cookie("TermsAndConditions") !== Accepted)
{
    $("#terms-and-conditions").hide();
} 

HTML

  <h1>Terms and Conditions</h1>
    <p>Example Content</p>

  <span class="accept-button"><a href="#" onclick="TermsAndConditions()">Accept</a></span></div

>

Answer 1

你的腳本有很多事情要做。

Mark 為您提供了正確的開始：不引用Accepted不會讓 JavaScript 高興； 字符串文字必須有引號。

其次，您的 jsFiddle 沒有鏈接 jQuery。在屏幕左側的“框架和擴展”下，確保您選擇了一個 jQuery 版本。

第三，jQuery 沒有內置的$.cookie方法； 有一些擴展提供了這一點，但它不是默認的 jQuery。 如果您使用的是 jQuery 插件，您是否也不會使用它來設置 cookie？ 相反，您使用本機瀏覽器擴展來設置 cookie。

第四，由於 jsFiddle 的工作方式，如果沒有一些技巧，您無法從 HTML 中調用 JavaScript 方法。 在 JavaScript 中附加適當的功能要好得多。

因此，要獲取您的 cookie，您可以這樣做：

var cookie = document.cookie.split(';')
    .map(function(x){ return x.trim().split('='); })
    .filter(function(x){ return x[0]==='TermsAndConditions'; })
    .pop();

如果 cookie 存在，它將是一個鍵/值數組。 然后您可以檢查以確保它存在並包含您要查找的值：

if(cookie && cookie[1]==='Accepted') {
    $("#terms-and-conditions").hide();
}

然后我們將點擊功能從 HTML 中移到 JavaScript 中：

$('.accept-button a').on('click', function(){
    TermsAndConditions();
    return false;
}); 

這是一個適合您的 jsFiddle： http : //jsfiddle.net/3d928/1/

請注意，在您的原始示例中，當用戶單擊鏈接時，您並沒有隱藏#terms-and-conditions元素； 你所做的就是設置cookie。 所以它不會被隱藏，直到用戶重新加載頁面。 如果您想同時執行這兩項操作，只需將元素隱藏在點擊處理程序中：

$('.accept-button a').on('click', function(){
    TermsAndConditions();                   // set cookie
    $("#terms-and-conditions").hide();      // hide element
    return false;
}); 

Answer 2

看看這個： http : //jsfiddle.net/bochzchan/fkFSZ/

function TermsAndConditions(){       
   days=30;
   myDate = new Date();
   myDate.setTime(myDate.getTime()+(days*24*60*60*1000));    
   document.cookie = 'TermsAndConditions=Accepted; expires=' + myDate.toGMTString();     
}

function CheckCookies(){   
    if ($.cookie("TermsAndConditions") === "Accepted")
    {
        $("#terms-and-conditions").hide();
    } 
}

也許你忘記包含 jquery cookie js

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<div id="terms-and-conditions">
    <h1>Terms and Conditions</h1>
    <p>Example Content</p>  
    <span class="accept-button"><a href="#" onclick="TermsAndConditions()">Accept</a></span>    
</div>
<a href="#" onclick="CheckCookies()">Check</a>

Answer 3

有幾件事情需要考慮：

1. 您應該在if語句中對Accepted引號。
2. 您應該使用===比較，而不是!== 。