如何设置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 已经在评论中指出的内容（将getDocumentById() - 不存在的本机功能 - 替换为document.getElementById()），您还必须确保添加的图片 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.id 将仅在您将 this 作为内联函数的参数传递时返回元素的 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/