javascript - 如何使用 onclick 防止默认 addClass 函数并在给定日期返回该函数

Question

我想在一周中的某一天向链接动态添加一个类以显示它，并使链接在单击之前保持可见。单击时，应删除该类，然后隐藏该链接，并保持隐藏状态，直到星期几返回。

这是我尝试过的。

jQuery(function($) {
var day = new Date().getDay();

if( day == 4 ) {
    $(".link").addClass("shown");
}
$(".link").click(function(e) {
    e.preventDefault();
    $(this).removeClass("shown");
});
});

单击时它会正确删除，但只要存在 24 小时期限，该链接就会在页面重新加载时显示。实现目标的正确编码是什么？

Answer 1

扩展 louisik1 的答案和我的评论，下面是如何使用 cookie 完成此操作的基本示例:

https://jsfiddle.net/L9ojth2n/1/有这个的工作版本。

首先，在点击时检查它是哪个链接，并将其存储为在第二天午夜到期的 cookie(如果您想在一周中的多天显示链接):

var expires=new Date();
expires.setDate(expires.getDate()+1);
expires.setHours(0);
expires.setMinutes(0);
expires.setSeconds(0);
expires.setMilliseconds(0);
document.cookie="clickedLink"+$(".link").index(this)+"=yes;expires="+expires.toUTCString()+";path=/";

其次，当您下次可视化链接时，请检查 cookie 以查看是否已单击任何链接:

if(document.cookie.split(';').reduce(function(object,cookie){
    var data=cookie.split('=');
    object[data[0].trim()]=data[1];
    return object;
},{})['clickedLink'+$('.link').index(this)]!="yes"){
    $(this).addClass("shown");
}

请注意，精通技术的用户如果删除 cookie，可能会破坏此功能并在一天内多次显示链接。要求特定用户登录并将数据存储在服务器上是最安全的。