Question

这是我网站上的代码：您可以看到select，其下拉列表包含一些选项。单击某个选项后，将使用onchange()事件加载背景。

<select id="rds" onchange="bg(this[this.selectedIndex].value);">
    <option value="0.png">1. Default</option>
    <option value="1.png">2. Collage</option>
    <option value="2.jpg">3. Darkness</option>
</select>

这里是bg()函数：

function bg(num) {
    document.body.style.backgroundImage = "url(http://mk7vrlist.altervista.org/backgrounds/" + num + ")";
}

这完美无缺。我必须保存用户选择的选项，因此每次打开网页时，他都可以看到他选择的背景。

我正在考虑保存cookie并加载它。由于我看到javascript有点棘手，我以为我可以使用jQuery所以我做了这个：

<select id="rds" onchange="bg(this[this.selectedIndex].value); $.cookie("example", this[this.selectedIndex].value, {expires: 7});">
    <option value="0.png">1. Default</option>
    <option value="1.png">2. Collage</option>
    <option value="2.jpg">3. Darkness</option>
</select>

Cookie未保存，Mozilla告诉我SyntaxError: syntax error。我怎么能解决这个问题？

我以这种方式包含了jQuery文件：

<script type="text/javascript" src="http://mk7vrlist.altervista.org/jquery-1.10.2.min.js"></script>

保存Cookie后如何加载背景？我必须调用bg()函数，但我不知道该怎么做。

Answer 1

首先，不要使用on[event]属性。它们已经过时，使维护更加困难。而是将您的事件附加到JS中。这是一个jQuery示例，使用$.cookie()：

<select id="rds">
    <option value="0.png">1. Default</option>
    <option value="1.png">2. Collage</option>
    <option value="2.jpg">3. Darkness</option>
</select>

var setBackground = function(bgImg) {
    $.cookie('bgImg', bgImg);
    $('body').css('background-image', 'url(http://mk7vrlist.altervista.org/backgrounds/' + bgImg + ')');
}

$(function() { 
    // on select change
    $('#rds').change(function() {
        setBackground($(this).val());
    });

    // on load
    setBackground($.cookie('bgImg'));
});

Answer 2

您的语法错误在这里：

<select id="rds" onchange="bg(this[this.selectedIndex].value); $.cookie("example", this[this.selectedIndex].value, {expires: 7});">

你应该这样写：

<select id="rds" onchange="bg(this[this.selectedIndex].value); $.cookie('example', this[this.selectedIndex].value, {expires: 7});">

请注意“示例”周围的简单引用。在您的示例中，您使用了双引号来干扰html属性的双引号。

Answer 3

您的语法错误是因为您没有转义onchange事件中的引号，请将其更改为：

<select id="rds" onchange="bg(this[this.selectedIndex].value); $.cookie('example', this[this.selectedIndex].value, {expires: 7});">
    <option value="0.png">1. Default</option>
    <option value="1.png">2. Collage</option>
    <option value="2.jpg">3. Darkness</option>
</select>

要加载背景，请使用其他答案的解决方案：）。

使用javascript保存并加载背景

3 个答案: