2

这是我网站上的代码：您可以看到一个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()函数，但我不知道该怎么做。

4

3 回答 3

3

首先，不要使用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'));
});
于 2013-09-13T12:20:28.477 回答
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 属性的双引号的双引号。

于 2013-09-13T12:21:27.800 回答
2

您的语法错误是因为您没有在 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>

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

于 2013-09-13T12:22:15.947 回答