如何设置Cookie onclick以更改背景

Question

我尝试更改div onclick的背景，并使用Cookie进行保存。 这是我的代码。 首先，我不知道是否已设置cookie，其次，是否可以使用cookie的值更改背景。

有人可以帮忙吗？

<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>

Answer 1

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

$('.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/