[英]How to set cookie onclick for changing background
I try to change the background of a div onclick and preserved it with a cookie. 我尝试更改div onclick的背景,并使用Cookie进行保存。 Here is my code. 这是我的代码。 Firstly I can't realize if my cookie has been set and secondly if I can change the background with the value of the cookie. 首先,我不知道是否已设置cookie,其次,是否可以使用cookie的值更改背景。
Can anyone help with an idea? 有人可以帮忙吗?
<div class="container">
<div class="col-md-6">
<div class="one"><a id="1" onClick="addcookie()" href="#">Fisrt Link</a></div>
</div>
<div class="col-md-6">
<div class="two"><a id="2" onClick="addcookie()" href="#">Second Link</a></div>
</div>
</div>
<script src=js/jquery-1.11.1.js></script>
<script src="js/jquery.cookie.js"></script>
<script>
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'));
}
</script>
<script src=js/bootstrap.js></script>
</body>
Other than what @George already pointed out in a comment (replace getDocumentById()
- non-existent native function - with document.getElementById()
), you'll also have to make sure that you're adding the image URL is coded properly, os instead of... 除了@George已在注释中指出的document.getElementById()
用document.getElementById()
代替getDocumentById()
-不存在的本机函数)之外,还必须确保添加的图像URL编码正确,而不是...
$('.one').css('background', $.cookie('cookieName'));
...do this... ...做这个...
$('.one').css('background', 'url("' + $.cookie(cookieName) + '")');
This is the proper CSS syntax for including background URL's is not... 这是不包括背景URL的正确CSS语法。
background:http://path to image/image.png
...but... ...但...
background:url("http://path to image/image.png");
...and because if you want to use a variable as a function's parameter, you have to omit the quotes around it, ie. ...并且因为如果您想使用变量作为函数的参数,则必须省略其周围的引号,即。 $.cookie('cookieName')
becomes $.cookie(cookieName)
. $.cookie('cookieName')
变为$.cookie(cookieName)
。
Additionally, this.id
will only return the id of the element if you pass this
as a parameter of your inline function as follows: 此外,仅当您this
元素作为内联函数的参数传递时, this.id
才会返回该元素的ID,如下所示:
onClick="addcookie(this)"
...then reference the same in your function like this: ...然后在函数中引用相同的内容,如下所示:
function addcookie(that)
...and use it like this: ...并像这样使用它:
var idi = that.id;
Here is a jsfiddle where you can try this: http://jsfiddle.net/yxj8w6d0/ 这是一个jsfiddle,您可以在其中尝试: http : //jsfiddle.net/yxj8w6d0/
EDIT : With a few little modifications (remove the one
and two
classed divs, and add no-repeat
to the background) you have a neat little way of always only adding the background to the element in question, assuming it's what you actually wanted to achieve: http://jsfiddle.net/yxj8w6d0/1/ 编辑 :进行一些小的修改(删除one
和two
分类的div,并在背景中添加no-repeat
),您总是有一个整洁的小方法,可以仅将背景添加到所讨论的元素中,假设这正是您真正想要的实现: http : //jsfiddle.net/yxj8w6d0/1/
EDIT #2 : To get the images loaded if the cookie already exists, create another function that fires on document ready going through your links and checking them against the existing cookies, as follows: 编辑#2 :要获取已存在Cookie的图像,请创建另一个功能,以在准备通过您的链接并针对现有Cookie进行检查的文档上触发,如下所示:
$(document).ready(function() {
$('.container div a').each(function(){
if ($.cookie(this.id))
$(this).css('background', 'url("' + $.cookie(this.id) + '") no-repeat');
});
});
I updated the above fiddle accordingly. 我相应地更新了上面的小提琴。 Try it by clicking the links first, then running the script again - you'll see that the links will keep their background: http://jsfiddle.net/yxj8w6d0/2/ 通过首先单击链接,然后再次运行脚本来进行尝试-您将看到链接将保留其背景: http : //jsfiddle.net/yxj8w6d0/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.