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。要求特定用户登录并在服务器上存储数据是最安全的。

Answer 2

是的，您需要存储已经点击链接的用户的记录。由于页面将重新加载所有脚本并重新设置所有变量等，因此您需要通过其他方式存储“长寿命”数据，其中有几种。

通常在过去使用Cookie将数据存储在用户的计算机上。
现代浏览器支持本地存储，它具有在用户计算机上存储数据的非常简单的语法，如cookie。但它确实需要HTML5。
以某种方式将信息存储在服务器代码中（例如保存到SQL，或存储到服务器中的某种文档（txt，xml，csv）（（'用户Mike在此时/日点击日期链接'）），然后在加载页面时将详细信息发送到您的javascript。
将其作为查询或哈希参数存储在URL中。这可以由用户更改或删除，因此在您预期时不能依赖它（或不存在）。

任何这些都是实现目标的正确方法，并且每个目标都记录在案。

干杯

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

2 个答案: