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功能与这种新方法联系起来？

谢谢， 亚伦。