在所有頁面上都持久存在的jQuery后台更改器？

Question

我正在嘗試為我的網站構建一個后台轉換器，並且工作正常，只是當您移至其他頁面時更改丟失。

我嘗試了幾種方法來在您更改頁面時使更改生效，但沒有任何樂趣。

這是帶有一些測試圖像的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值傳遞給變量，並使腳本在頁面加載時進行設置，但無法使其正常工作。

任何幫助都會很棒。 謝謝，亞倫

Answer 1

您可以使用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>

Answer 2

新代碼如下所示：

    $('<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函數綁定到該新方法？

謝謝，亞倫