如何设置cookie onclick以更改背景

我尝试更改div onclick的背景并使用cookie保存它。 这是我的代码。 首先，我无法意识到我的cookie是否已经设置，其次我是否可以使用cookie的值更改背景。

任何人都可以帮助一个想法吗？

 
 
Fisrt Link
 
 
 
Second Link
 
 
    var cookieName = 'cookie1'; function addcookie(){ var date = new Date(); var minutes = 5; date.setTime(date.getTime() + (minutes * 60 * 1000)); var idi = getDocumentById(this.id); var cookieValue = "http://path to image/image"+idi+".png"; $.cookie(cookieName, cookieValue, { expires: date }); $('.one').css('background', $.cookie('cookieName')); }    

Answer 1

除了@George在注释中指出的document.getElementById()用document.getElementById()替换getDocumentById() – 不存在的本机函数），你还必须确保添加图像URL是正确编码的，os而不是……

 $('.one').css('background', $.cookie('cookieName')); 

…做这个…

 $('.one').css('background', 'url("' + $.cookie(cookieName) + '")'); 

这是包含背景URL的正确CSS语法不是……

 background:http://path to image/image.png 

…但…

 background:url("http://path to image/image.png"); 

…并且因为如果你想使用变量作为函数的参数，你必须省略它周围的引号，即。 $.cookie('cookieName')变成$.cookie(cookieName) 。

此外，如果您this元素作为内联函数的参数传递， this.id将仅返回元素的id，如下所示：

 onClick="addcookie(this)" 

…然后在你的函数中引用相同的内容，如下所示：

 function addcookie(that) 

……并像这样使用它：

 var idi = that.id; 

这是一个jsfiddle你可以试试这个： http ： //jsfiddle.net/yxj8w6d0/

编辑 ：通过一些小的修改（删除one和two分类的div，并在背景中添加no-repeat ），你有一个简洁的方法，总是只添加背景到有问题的元素，假设它是你真正想要的实现： http ： //jsfiddle.net/yxj8w6d0/1/

编辑＃2 ：要在cookie已经存在的情况下加载图像，请创建另一个函数，该函数在文档准备好的情况下通过链接触发并根据现有cookie检查它们，如下所示：

 $(document).ready(function() { $('.container div a').each(function(){ if ($.cookie(this.id)) $(this).css('background', 'url("' + $.cookie(this.id) + '") no-repeat'); }); }); 

我相应地更新了上面的小提琴。 首先单击链接然后再次运行脚本尝试它 – 您将看到链接将保留其背景： http ： //jsfiddle.net/yxj8w6d0/2/