Question

我有一个只有注册用户才能访问的网页我使用Bootstrap作为CSS框架如果用户登录，则会出现一个警告框，其中包含以下成功消息：

<div class="container">
    <div class="alert alert-success" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>Success!</strong> You have been signed in successfully!
    </div>
</div>

现在我想在几秒钟之后关闭它。我使用这个jquery脚本来做到这一点：

window.setTimeout(function() {
     $(".alert").fadeTo(500, 0).slideUp(500, function(){
     $(this).remove();
  });
}, 1500);

如何只运行一次此代码，以便在用户意外刷新浏览器时再次看不到此警报？

我在这里阅读了这篇文章https://stackoverflow.com/a/23859937/5930557 并且知道可以使用http://api.jquery.com/one/中的.one()函数完成此操作
但我不知道如何将它包含在我的代码中。有人可以为我纠正并解释，导致jquery和javascript对我来说是新的：P

Answer 1

您可以使用Cookie。它被解释为here

当页面加载时你可以检查cookie，如果它没空，你是否可以做你想做的事情。

Answer 2

解决方案是使用cookie并将其日期设置为将来的很远。

注意：这个小提琴不允许你设置cookie。

＆＃13;

$(function(){
    var popup = getCookie(popup);
    if(popup){
//Dislay your alert
        $('.container').append(
            ' <div class="alert alert-success" role="alert"> '
            + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
            + '<strong>Success!</strong> You have been signed in successfully! </div>'
        );

    }
});

window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove();
        //Set the alert cookie to false
        document.cookie = "popup=false; expires=Thu, 18 Dec 2090 12:00:00 UTC";
    });
}, 1500);


//Function to get cookies
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    
</div>

＆＃13;

Answer 3

.one()会在每次加载页面时触发一次事件，因此不适用于您的示例。

正如另一个答案所说，你可以使用cookies，如下所示：

// get the cookie if its there
var popUpShown = getCookie('popUpShown');
var numberOfDaysCookieExpiresIn = 99999999999;

// check the cookie to see if the popup has been shown already
if (popUpShown != '1') {
  window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
      $(this).remove();
    });
  }, 1500);

  // set the cookie so we dont show the pop up again
  setCookie('popUpShown', '1', numberOfDaysCookieExpiresIn);
};

如何用jquery只运行一次函数？

3 个答案: