jQuery后台更改器在所有页面上都是持久的吗?

时间:2013-02-22 10:14:01

标签: jquery background persistence swap

我正在尝试为我的网站构建一个后台更换器,但它工作正常,但移动到其他页面时更改会丢失。

我尝试了一些方法来改变页面,但是没有快乐。

这是带有一些测试图像的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值传递给变量,并使脚本在页面加载时设置它,但无法使其工作。

任何帮助都会很棒。 谢谢, 亚伦。

2 个答案:

答案 0 :(得分:0)

您可以设置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>

答案 1 :(得分: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函数绑定到这个新方法?

谢谢, 亚伦。