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

您可以設置一個Cookie使用jQuery 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'); 
}); 

它使用動畫divs和mouseover/out函數代替單選按鈕。

如何將cookie功能與這種新方法聯繫起來？

謝謝， 亞倫。