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) + '")');

这是包含背景网址的正确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/

如何设置cookie onclick以更改背景

1 个答案: