2

これは、私の Web サイトにあるコードです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 + ")";
}

これは完全に機能します。ユーザーが選択したオプションを保存する必要があるため、ユーザーが Web ページを開くたびに、選択した背景が表示されます。

を保存し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 に答える