0

サイトの背景チェンジャーを構築しようとしていますが、別のページに移動すると変更が失われることを除いて、正常に機能しています。

ページを変更したときに変更を固定する方法をいくつか試しましたが、喜びはありません。

いくつかのテスト画像を含む jQuery を次に示します。

$(function() {
$(".bgCollection").change(function() {
    if ($("#wood").is(":checked")) {
        $('#background img:first').attr('src', 'http://cdnimg.visualizeus.com/thumbs/7f/78/gfx,wood-7f78592c9a6ed3390492c560c5ac6fec_h.jpg');
    }
    if ($("#steel").is(":checked")) {
        $('#background img:first').attr('src', 'http://www.aroorsteelcorporation.com/full-images/stainless-steel-834007.jpg');
    }
    if ($("#metal").is(":checked")) {
        $('#background img:first').attr('src', 'http://i00.i.aliimg.com/photo/v0/468538622/Brushed_metal_texture_prepainted_metal.jpg');
    }
}); });

そして、ここにhtmlがあります：

<input name="BG" id="wood" type="radio" value="" class="bgCollection" />
<label for="radio">
  Wood
</label>
<input name="BG" id="steel" type="radio"  class="bgCollection"/>
<label for="radio">
  Steel
</label>
<input name="BG" id="metal" type="radio" value="" class="bgCollection"/>
<label for="radio">
  Black metal
</label>

現在の src 値を変数に渡して、ページの読み込み時にスクリプトを設定しようとしましたが、機能しませんでした。

どんな助けでも素晴らしいでしょう。ありがとう、アーロン。

4

2 に答える 2

0

新しいコードは次のようになります。

    $('<div id="bg_swapper"><div id="one" class="bgCollection"><p class="ocr">Swap Background</p></div><div id="two" class="bgCollection"><p class="ocr">Swap Background</p></div><div id="three" class="bgCollection"><p class="ocr">Swap Background</p></div></div>').insertBefore('.vines_left_top');

$('#bg_swapper p').hide();

 $('#one, #two, #three').mouseover(function() {
     $(this).stop(true).animate({width: '230px'}, 300);
     $(this).children('p').show().css('text-indent','0px');
 });
  $('#one, #two, #three').mouseout(function() {
     $(this).stop(true).animate({width: '20px'}, 300);
    $(this).children('p').hide().css('text-indent','999px');
 });

$('#one').click(function(e) { 
$('#background img:first').attr('src', 'http://cdnimg.visualizeus.com/thumbs/7f/78/gfx,wood-7f78592c9a6ed3390492c560c5ac6fec_h.jpg');
});
$('#two').click(function(e) { 
$('#background img:first').attr('src', 'http://www.aroorsteelcorporation.com/full-images/stainless-steel-834007.jpg');
});
$('#three').click(function(e) { 
$('#background img:first').attr('src', 'http://i00.i.aliimg.com/photo/v0/468538622/Brushed_metal_texture_prepainted_metal.jpg');
});

ラジオ ボタンの代わりに、アニメーション化された div とマウスオーバー/アウト機能を使用します。

Cookie 関数をこの新しいメソッドに結び付けるにはどうすればよいですか?

ありがとう、アーロン。

于 2013-03-11T12:44:32.837 に答える
0

jquery-cookie スクリプトを使用して変更を追跡する Cookie を設定できます: https://github.com/carhartl/jquery-cookie

JavaScript:

$(function() {

    // get cookie
    var background = $.cookie('background');

    // update background
    changeBackground(background);

});

function saveBackground(background) {

    // set cookie
    $.cookie('background', background);

    // change background
    changeBackground(background);

}

// background changer
function changeBackground(background) {

    switch (background) {

        case "steel":
            $('#background img:first').attr('src', 'http://www.aroorsteelcorporation.com/full-images/stainless-steel-834007.jpg');
            break;

        case "metal":
            $('#background img:first').attr('src', 'http://i00.i.aliimg.com/photo/v0/468538622/Brushed_metal_texture_prepainted_metal.jpg');
            break;

        case "wood":
        default:
            $('#background img:first').attr('src', 'http://cdnimg.visualizeus.com/thumbs/7f/78/gfx,wood-7f78592c9a6ed3390492c560c5ac6fec_h.jpg');
            break;
    }
}

html:

<input id="wood" type="radio" value="" onclick="saveBackground('wood');" />
    <label for="radio">  Wood</label>

<input id="steel" type="radio" onclick="saveBackground('wood');"/>
    <label for="radio">  Steel</label>

<input id="metal" type="radio" onclick="saveBackground('wood');"/>
    <label for="radio">  Black metal</label>
于 2013-02-22T10:22:52.413 に答える